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 和 js（npm 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 与 disabledDate

min/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 3（alpha）实现，模块叫datePicker，theme主题参数不存在，样式变体用variant: 'solid' | 'grid'。做选型时注意区分新旧两代的 API。
min/max 不遵循你自定义的 format。哪怕格式写成yyyy/MM/dd，min/max 的字符串仍要按yyyy-M-d和HH:mm:ss的写法传，否则解析不到。
数字型 min/max 是"天数"优先。数字小于一天的毫秒数（86400000）时按天数算，否则按毫秒时间戳；且 max 的数字值会包含当天 23:59:59，min 包含 00:00:00。
非输入框元素别指望 focus 触发。当elem不是 input/textarea 时，trigger: 'focus'会被自动降级为click。
done 的触发面比你想象的大。点"确定"、"清空"、"现在"以及快捷栏选项都会走done，回调里记得处理值为空的分支。
面板被页面遮罩压住时加 backdrop。datePicker 继承自 popup 层，backdrop: 0.03能加一层压暗遮罩，避免面板和内容层视觉混淆。
外部按钮控制开合用 manual。设trigger: 'manual'加defaultOpen: true，render返回的实例上调用open()即可编程式打开。
inline 内嵌模式下的清空按钮会变"重置"。inline: true把面板直接嵌进容器时（侧边筛选栏很适合），底部按钮语义会调整，写交互逻辑时留意。