Layui datePicker 日期选择器：5 分钟跑通年、月、日、时、分 5 类时间选择

Layui datePicker 日期选择器5 分钟跑通年、月、日、时、分 5 类时间选择【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui做表单的同学大概都踩过日期字段的坑用户手敲2024/2/31后端校验直接炸掉敲2024-02-30时用户还以为是系统的错。Layui 的 datePicker 就是为这种场景做的日期和时间选择器组件——把手敲变成面板上点年、月、日、时、时分秒五种面板都支持区间选择、格式定制、禁用日期这些需求也都有对应配置。下面先给你能跑起来的最小代码再按需求逐项讲怎么配最后列几个容易踩的坑。用 8 行代码跑起来页面里引上 layui 的 css 和 jsnpm i layui后在dist/下放一个普通输入框然后const { datePicker } layui; datePicker.render({ elem: #demo-date, done: (params) { console.log(params.value); // 回填的字符串如 2026-09-02 }, });效果是点击输入框弹出日历面板选完日期自动回填默认格式就是yyyy-MM-dd无需任何多余配置。想批量绑定多个同配置的输入框elem直接传类选择器即可如.demo-item。按场景定制五种面板类型type 一行切换type可选year、month、date、time、datetime格式会跟着类型自动切换如 time 对应HH:mm:ss。面试登记表只要年份传type: year就行datePicker.render({ elem: #demo-year, type: year, min: 2021-01-01, max: 2026-12-31, });区间选择单输入框或双输入框两种写法range: true时一个输入框写「开始 ~ 结束」分隔符由rangeSeparator控制默认 ~ 传两个选择器的数组则分别回填两个输入框再配合rangeLinked: true左右日历可联动datePicker.render({ elem: #start, range: [#start, #end], // 双输入框模式 rangeLinked: true, });注意rangeLinked只对type为date或datetime时生效纯时间范围选不了联动。格式与初始值format 混入中文都没问题format支持yyyy/y/MM/M/dd/d/HH/H/mm/m/ss/s这组占位符占位符之间的文字原样输出所以yyyy年MM月dd日这种中文格式可以直接写。初始值value可以传Date、时间戳或符合format的字符串配合autoFillValue默认 true自动回填datePicker.render({ elem: #demo-date, format: yyyy/MM/dd, value: new Date(1535673600000), });限制可选范围min、max 与 disabledDatemin/max有三种写法字符串年月日用-、时分秒用:分隔、数字相对今天的天数或毫秒数、Date对象。想更细粒度地禁掉某些天用disabledDate回调返回true即禁用datePicker.render({ elem: #demo-date, min: -30, // 数字按天数理解即最近 30 天 disabledDate: (date) date.getDay() 6, // 周日不可选 });快捷选项与节日标注shortcuts、mark、holidays运营后台里昨天/今天/近 7 天这类按钮很常见shortcuts传数组即可value支持Date、时间戳、日期字符串返回数组则为区间datePicker.render({ elem: #demo-shortcuts, shortcuts: [ { text: 昨天, value: (() { const d new Date(); d.setDate(d.getDate() - 1); return d; })() }, { text: 今天, value: Date.now() }, ], });mark用于给特定日期打备注键形如0-10-14: 生日开头的0代表每年holidays传两个数组分别标注法定节假日和补班日中文版再开showFestival: true会显示公历节日。排坑经验别把 2.x 的 laydate 代码搬过来。本仓库是 Layui 3alpha实现模块叫datePickertheme主题参数不存在样式变体用variant: solid | grid。做选型时注意区分新旧两代的 API。min/max 不遵循你自定义的 format。哪怕格式写成yyyy/MM/ddmin/max 的字符串仍要按yyyy-M-d和HH:mm:ss的写法传否则解析不到。数字型 min/max 是天数优先。数字小于一天的毫秒数86400000时按天数算否则按毫秒时间戳且 max 的数字值会包含当天 23:59:59min 包含 00:00:00。非输入框元素别指望 focus 触发。当elem不是 input/textarea 时trigger: focus会被自动降级为click。done 的触发面比你想象的大。点确定、清空、现在以及快捷栏选项都会走done回调里记得处理值为空的分支。面板被页面遮罩压住时加 backdrop。datePicker 继承自 popup 层backdrop: 0.03能加一层压暗遮罩避免面板和内容层视觉混淆。外部按钮控制开合用 manual。设trigger: manual加defaultOpen: truerender返回的实例上调用open()即可编程式打开。inline 内嵌模式下的清空按钮会变重置。inline: true把面板直接嵌进容器时侧边筛选栏很适合底部按钮语义会调整写交互逻辑时留意。扩展阅读完整示例页tests/visual/datePicker.html区间、快捷、节假日、内嵌等场景都在里面组件源码src/components/datePicker.js配置项注释最权威弹层基类src/components/popup.jstrigger、backdrop等能力继承自它项目说明与版本现状README.md【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考