主页
更新日志
文档
Github
Gitee
NPM
下载 layDate-v5.3.1
下载量：226843
下载 layDate 后，将文件夹 laydate 整个放置在您的项目任意目录，使用时只需引入 laydate.js 即可。以下是一个入门示例：
小试牛刀
查看代码
code
注意：如果你的页面已经使用了 layui，那么你直接采用 layui 内置的 laydate 模块即可，无需再重复引用独立版的 laydate.js
layDate 采用原生 JavaScript 编写，不依赖任何第三方库，兼容所有浏览器（IE6/7除外）
npm 安装：npm install layui-laydate
再试牛刀
常规用法
查看代码
中文版
国际版
code//常规用法laydate.render({ elem: '#test1'});//国际版laydate.render({ elem: '#test1-1' ,lang: 'en'});
其它选择器
查看代码
年选择器
年月选择器
时间选择器
日期时间选择器
code//年选择器laydate.render({ elem: '#test2' ,type: 'year'});//年月选择器laydate.render({ elem: '#test3' ,type: 'month'});//时间选择器laydate.render({ elem: '#test4' ,type: 'time'});//时间选择器laydate.render({ elem: '#test5' ,type: 'datetime'});
范围选择
查看代码
日期范围
-
年范围
年月范围
时间范围
日期时间范围
code//日期范围laydate.render({ elem: '#test6' //设置开始日期、日期日期的 input 选择器 //数组格式为 5.3.0 开始新增，之前版本直接配置 true 或任意分割字符即可 ,range: ['#test-startDate-1', '#test-endDate-1']});//年范围laydate.render({ elem: '#test7' ,type: 'year' ,range: true});//年月范围laydate.render({ elem: '#test8' ,type: 'month' ,range: true});//时间范围laydate.render({ elem: '#test9' ,type: 'time' ,range: true});//日期时间范围laydate.render({ elem: '#test10' ,type: 'datetime' ,range: true});
自定义格式
查看代码
请选择日期
请选择日期
请选择月份
请选择时间
请选择范围
请选择范围
code//自定义格式laydate.render({ elem: '#test11' ,format: 'yyyy年MM月dd日'});laydate.render({ elem: '#test12' ,format: 'dd/MM/yyyy'});laydate.render({ elem: '#test13' ,format: 'yyyyMM'});laydate.render({ elem: '#test14' ,type: 'time' ,format: 'H点M分'});laydate.render({ elem: '#test15' ,type: 'month' ,range: '→' ,format: 'yyyy-MM'});laydate.render({ elem: '#test16' ,type: 'datetime' ,range: '到' ,format: 'yyyy年M月d日H时m分s秒'});
公历节日和自定义重要日子
查看代码
开启公历节日
自定义重要日
code//开启公历节日laydate.render({ elem: '#test17' ,calendar: true});//自定义重要日laydate.render({ elem: '#test18' ,mark: { '0-10-14': '生日' ,'0-12-31': '跨年' //每年的日期 ,'0-0-10': '工资' //每月某天 ,'0-0-15': '月中' ,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章 ,'2099-10-14': '呵呵' } ,done: function(value, date){ if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语 alert('这一天是：中国人民抗日战争胜利72周年'); } }});
控制可选的日期与时间
查看代码
限定可选日期
前后若干天可选
限定可选时间
以9:30-17:30为例
code//限定可选日期var ins22 = laydate.render({ elem: '#test-limit1' ,min: '2016-10-14' ,max: '2080-10-14' ,ready: function(){ ins22.hint('日期可选值设定在
2016-10-14 到 2080-10-14'); }});//前后若干天可选，这里以7天为例laydate.render({ elem: '#test-limit2' ,min: -7 ,max: 7});//限定可选时间laydate.render({ elem: '#test-limit3' ,type: 'time' ,min: '09:30:00' ,max: '17:30:00' ,btns: ['clear', 'confirm']});
同时绑定多个
查看代码
code//同时绑定多个lay('.test-item').each(function(){ laydate.render({ elem: this ,trigger: 'click' });});
其它功能示例
查看代码
初始赋值
选中后的回调
日期切换的回调
不出现底部栏
只出现确定按钮
自定义事件
点我触发
双击我触发
日期只读
非input元素
code//初始赋值laydate.render({ elem: '#test19' ,value: '1989-10-14'});//选中后的回调laydate.render({ elem: '#test20' ,done: function(value, date){ alert('你选择的日期是：' + value + '\n获得的对象是' + JSON.stringify(date)); }});//日期切换的回调laydate.render({ elem: '#test21' ,change: function(value, date){ alert('你选择的日期是：' + value + '\n\n获得的对象是' + JSON.stringify(date)); }});//不出现底部栏laydate.render({ elem: '#test22' ,showBottom: false});//只出现确定按钮laydate.render({ elem: '#test23' ,btns: ['confirm']});//自定义事件laydate.render({ elem: '#test24' ,trigger: 'mousedown'});//点我触发laydate.render({ elem: '#test25' ,eventElem: '#test25-1' ,trigger: 'click'});//双击我触发lay('#test26-1').on('dblclick', function(){ laydate.render({ elem: '#test26' ,show: true ,closeStop: '#test26-1' });});//日期只读laydate.render({ elem: '#test27' ,trigger: 'click'});//非input元素laydate.render({ elem: '#test28'});
其它主题
查看代码
墨绿主题
自定义颜色主题
格子主题
code//墨绿主题laydate.render({ elem: '#test29' ,theme: 'molv'});//自定义颜色laydate.render({ elem: '#test30' ,theme: '#393D49'});//格子主题laydate.render({ elem: '#test31' ,theme: 'grid'});
直接嵌套显示
查看代码
2021 年8 月日一二三四五六1234567891011121314151617181920212223242526272829303112345678910112021-08-06重置现在确定
Aug2021SuMoTuWeThFrSa1234567891011121314151617181920212223242526272829303112345678910112021-08-06ResetNowConfirm
2021年8 月日一二三四五六123456789101112131415161718192021222324252627282930311234567891011一月二月三月四月五月六月七月八月九月十月十一月十二月2021-08重置现在确定
2021 年8 月选择时间日一二三四五六123456789101112131415161718192021222324252627282930311234567891011时
000102030405060708091011121314151617181920212223分
000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859秒
00010203040506070809101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585900:00:00重置现在确定
code//直接嵌套显示laydate.render({ elem: '#test-n1' ,position: 'static'});laydate.render({ elem: '#test-n2' ,position: 'static' ,lang: 'en'});laydate.render({ elem: '#test-n3' ,type: 'month' ,position: 'static'});laydate.render({ elem: '#test-n4' ,type: 'time' ,position: 'static'});
倘若 layDate 于你有益，欢迎：
小额赞赏