laydate 日历组件使用说明书一、产品概述1.1 项目简介laydate 是 Layui 官方开源、零依赖原生 JavaScript 编写的高级 Web 日历 / 日期时间选择组件仓库地址https://github.com/layui/laydate/最新稳定版本v5.3.12021-05-21 发布开源协议为 MIT可独立脱离 Layui 框架单独使用。 项目语言构成JavaScript 占 90.6%、CSS 占 9.4%轻量无第三方依赖兼容全主流浏览器广泛应用于表单、后台管理、预约、统计等需要日期选择的业务场景。1.2 核心特性五大选择类型年、年月、日期、时间、日期时间选择器全覆盖区间范围选择支持单输入框 / 双输入框双日历范围筛选高度自定义日期格式、主题、弹窗定位、按钮、触发事件、最大最小可选日期均可配置多语言支持内置中文版与国际版内置日期校正自动校验非法日期自动修正多种交互回调选择变更、确认、弹窗打开 / 关闭事件监听灵活定位弹窗悬浮、静态内嵌、固定定位三种模式无框架依赖原生 JS 编写可单独引入不绑定 Layui 主框架。1.3 仓库目录说明表格目录 / 文件作用dist编译后生产环境文件直接引入使用src源码目录二次开发 / 修改样式逻辑test单元测试 Demo 文件gulpfile.js打包编译脚本package.json项目配置、依赖描述CHANGELOG.md版本更新日志README.md仓库基础说明二、快速安装与引入2.1 本地文件引入推荐独立使用从仓库下载代码复制dist目录到项目静态资源文件夹HTML 页面引入 JS 文件CSS 内置在 JS 中无需额外引入input typetext iddateInput !-- 引入laydate核心脚本 -- script src./dist/laydate.js/script script // 初始化渲染日期选择器 laydate.render({ elem: #dateInput // 绑定输入框DOM选择器 }); /script2.2 Layui 框架内使用layui.use([laydate], function(){ const laydate layui.laydate; laydate.render({elem: #dateInput}); });三、核心 API 与配置参数3.1 核心渲染方法laydate.render(options);options为配置对象必填参数elem绑定 DOM 元素选择器 / 原生 DOM 对象。3.2 type 选择器类型5 种表格type 值组件类型功能说明year年选择器仅选择年份month年月选择器选择年 月份date日期选择器默认选择年月日time时间选择器仅选择时分秒datetime日期时间选择器年月日 时分秒示例// 日期时间选择器 laydate.render({ elem: #datetime, type: datetime });3.3 范围选择 range单输入框区间range: true自动生成双日历用-分隔起止时间laydate.render({ elem: #rangeDate, range: true });双输入框联动5.3.0 支持传入两个输入框选择器数组laydate.render({ elem: #start, range: [#start, #end] });3.4 自定义日期格式 format格式符规则表格符号说明yyyy4 位年份MM2 位月份dd2 位日期HH24 小时制小时mm分钟ss秒示例自定义格式laydate.render({ elem: #customDate, format: yyyy年MM月dd日 HH:mm:ss });3.5 常用限制参数min最小可选日期字符串 / Date 对象max最大可选日期// 仅允许选择今天及之前日期生日场景 laydate.render({ elem: #birthday, max: new Date() });3.6 事件回调change(value, date)切换日期实时触发done(value, date)点击「确定」关闭弹窗触发laydate.render({ elem: #demo, done: function(val, dateObj){ console.log(选中日期, val, 完整日期对象, dateObj); } });3.7 弹窗与界面配置position弹窗定位absolute(悬浮)/fixed(固定)/static(内嵌容器)theme自定义主题色btns底部按钮配置如btns: [confirm]只保留确定按钮trigger触发方式支持click/mousedown/dblclick四、常用内置工具方法关闭指定弹窗// 渲染时指定id const ins laydate.render({elem:#test, id:date1}); laydate.close(date1);获取某月最后一天// 获取2026年2月最后一天 let lastDay laydate.getEndDate(2, 2026);弹窗提示laydate.hint(date1, {content: 请选择合法日期, ms:2000});五、完整业务示例示例 1日期范围筛选后台查询input idstartTime placeholder开始日期 input idendTime placeholder结束日期 script srclaydate.js/script script laydate.render({ elem: #startTime, range: [#startTime, #endTime], type: datetime, format: yyyy-MM-dd HH:mm, max: new Date() }); /script示例 2内嵌静态日历数据看板div idcalendarBox/div script laydate.render({ elem: #calendarBox, position: static, // 内嵌容器不悬浮 showBottom: false // 隐藏底部按钮 }); /script六、版本与维护说明最新 Releasev5.3.12021-05-21 更新为当前稳定主版本提交记录仓库共 59 次提交8 位开发者维护开源协议MIT可商用、可二次修改保留原版权声明官方文档地址http://www.layui.com/laydate/七、常见问题弹窗被页面遮挡配置zIndex调高层级或position: fixed固定定位日期格式不匹配format 配置必须与业务接收格式统一内置自动校正非法日期独立引入报错确认引入dist编译后文件不要直接引入 src 源码移动端弹窗错位使用position: fixed适配滚动弹窗场景。人人皆为创造者共创方能共成长每个人都是使用者也是创造者是数字世界的消费者更是价值的生产者与分享者。在智能时代的浪潮里单打独斗的发展模式早已落幕唯有开放连接、创意共创、利益共享才能让个体价值汇聚成生态合力让技术与创意双向奔赴实现平台与伙伴的快速成长、共赢致远。原创永久分成共赴星辰大海原创创意共创、永久收益分成是东方仙盟始终坚守的核心理念。我们坚信每一份原创智慧都值得被尊重与回馈以永久分成锚定共创初心让创意者长期享有价值红利携手万千伙伴向着科技星辰大海笃定前行拥抱硅基 生命与数字智能交融的未来共筑跨越时代的数字文明共同体。东方仙盟拥抱知识开源共筑数字新生态在全球化与数字化浪潮中东方仙盟始终秉持开放协作、知识共享的理念积极拥抱开源技术与开放标准。我们相信唯有打破技术壁垒、汇聚全球智慧才能真正推动行业的可持续发展。开源赋能中小商户通过将前端异常检测、跨系统数据互联等核心能力开源化东方仙盟为全球中小商户提供了低成本、高可靠的技术解决方案让更多商家能够平等享受数字转型的红利。共建行业标准我们积极参与国际技术社区与全球开发者、合作伙伴共同制定开放协议 与技术规范推动跨境零售、文旅、餐饮等多业态的系统互联互通构建更加公平、高效的数字生态。知识普惠共促发展通过开源社区 、技术文档与培训体系东方仙盟致力于将前沿技术转化为可落地的行业实践赋能全球合作伙伴共同培育创新人才推动数字经济 的普惠式增长阿雪技术观在科技发展浪潮中我们不妨积极投身技术共享。不满足于做受益者更要主动担当贡献者 。无论是分享代码、撰写技术博客还是参与开源项目 维护改进每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地我们携手在此探索硅基 生命为科技进步添砖加瓦。Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Dont just be the one reaping all the benefits; step up and be a contributor too. Whether youre tossing out your code snippets , hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. Were gonna team up and explore the whole silicon - based life thing, and in the process, well be fueling the growth of technology