登录
当前位置： 首页 > 工具软件 > layDate > 使用案例 >

时间与日期插件 -- laydate 使用方法(摘自官网)

尉迟正平
2023-12-01

简单例子：

$(function(){    
    var start = {    
        elem: '#start', //选择ID为START的input    
        format: 'YYYY/MM/DD hh:mm:ss', //自动生成的时间格式    
        min: laydate.now(), //设定最小日期为当前日期    
        max: '2099-06-16 23:59:59', //最大日期    
        istime: true, //必须填入时间    
        istoday: false,  //是否是当天    
        start: laydate.now(0,"YYYY/MM/DD hh:mm:ss"),  //设置开始时间为当前时间    
        choose: function(datas){    
             end.min = datas; //开始日选好后，重置结束日的最小日期    
             end.start = datas //将结束日的初始值设定为开始日    
        }    
    };


和 layer 一样，你可以在 layui 中使用 layDate，也可直接使用 layDate 独立版，请按照你的实际需求来选择。

场景用前准备调用方式
1. 在 layui 模块中使用下载 layui 后，引入layui.css和layui.js即可通过layui.use('laydate', callback)加载模块后，再调用方法
2. 作为独立组件使用去 layDate 独立版本官网下载组件包，引入 laydate.js 即可直接调用方法使用
这是一个最简单的示例：
对应的代码如下： 
 
 
在 layui 模块中使用layui.code
 
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.  <title>layDate快速使用</title>
  6.  <link rel="stylesheet" href="/static/build/layui.css" media="all">
  7. </head>
  8. <body>
  9.  
  10. <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  11.  <input type="text" class="layui-input" id="test1">
  12. </div>
  13.  
  14. <script src="/static/build/layui.js"></script>
  15. <script>
  16. layui.use('laydate', function(){
  17.  var laydate = layui.laydate;
  18.  
  19.  //执行一个laydate实例
  20.  laydate.render({
  21.  elem: '#test1' //指定元素
  22.  });
  23. });
  24. </script>
  25. </body>
  26. </html>
  27.  
 
 
 
 
作为独立组件使用layui.code
 
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.  <title>使用 layDate 独立版</title>
  6. </head>
  7. <body>
  8.  
  9. <input type="text" id="test1">
  10.  
  11. <script src="laydate.js"></script>
  12. <script>
  13. //执行一个laydate实例
  14. laydate.render({
  15.  elem: '#test1' //指定元素
  16. });
  17. </script>
  18. </body>
  19. </html>
  20.  
 
 
除了在组件加载方式有一些小小的不同，其它都完全类似
 

 
基础参数选项 

 
 
通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数.
 

 
elem - 绑定元素 

 
 
类型：String/DOM，默认值：无
 
 
必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象
 
 
 
 
codelayui.code
 
 
  1. laydate.render({ 
  2.  elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
  3. });
  4.  
 

 
type - 控件选择类型 

 
 
类型：String，默认值：date
 
 
用于单独提供不同的选择器类型，可选值如下表：
 
 
type可选值名称用途
year年选择器只提供年列表选择
month年月选择器只提供年、月选择
date日期选择器可选择：年、月、日。type默认值，一般可不填
time时间选择器只提供时、分、秒选择
datetime日期时间选择器可选择：年、月、日、时、分、秒
 
 
 
 
codelayui.code
 
 
  1. //年选择器
  2. laydate.render({ 
  3.  elem: '#test'
  4.  ,type: 'year'
  5. });
  6.  
  7. //年月选择器
  8. laydate.render({ 
  9.  elem: '#test'
  10.  ,type: 'month'
  11. });
  12.  
  13. //日期选择器
  14. laydate.render({ 
  15.  elem: '#test'
  16.  //,type: 'date' //默认，可不填
  17. });
  18.  
  19. //时间选择器
  20. laydate.render({ 
  21.  elem: '#test'
  22.  ,type: 'time'
  23. });
  24.  
  25. //日期时间选择器
  26. laydate.render({ 
  27.  elem: '#test'
  28.  ,type: 'datetime'
  29. });
  30.  
 

 
range - 开启左右面板范围选择 

 
 
类型：Boolean/String，默认值：false
 
 
如果设置 true，将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。
 
 
 
 
codelayui.code
 
 
  1. //年范围选择
  2. laydate.render({ 
  3.  elem: '#test'
  4.  ,type: 'year'
  5.  ,range: true //或 range: '~' 来自定义分割字符
  6. });
  7.  
  8. //年月范围选择
  9. laydate.render({ 
  10.  elem: '#test'
  11.  ,type: 'month'
  12.  ,range: true //或 range: '~' 来自定义分割字符
  13. });
  14.  
  15. //日期范围选择
  16. laydate.render({ 
  17.  elem: '#test'
  18.  ,range: true //或 range: '~' 来自定义分割字符
  19. });
  20.  
  21. //时间范围选择
  22. laydate.render({ 
  23.  elem: '#test'
  24.  ,type: 'time'
  25.  ,range: true //或 range: '~' 来自定义分割字符
  26. });
  27.  
  28. //日期时间范围选择
  29. laydate.render({ 
  30.  elem: '#test'
  31.  ,type: 'datetime'
  32.  ,range: true //或 range: '~' 来自定义分割字符
  33. });
  34.  
 

 
format - 自定义格式 

 
 
类型：String，默认值：yyyy-MM-dd
 
 
通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：
 
 
格式符说明
yyyy年份，至少四位数。如果不足四位，则前面补零
y年份，不限制位数，即不管年份多少位，前面均不补零
MM月份，至少两位数。如果不足两位，则前面补零。
M月份，允许一位数。
dd日期，至少两位数。如果不足两位，则前面补零。
d日期，允许一位数。
HH小时，至少两位数。如果不足两位，则前面补零。
H小时，允许一位数。
mm分钟，至少两位数。如果不足两位，则前面补零。
m分钟，允许一位数。
ss秒数，至少两位数。如果不足两位，则前面补零。
s秒数，允许一位数。
 
 
通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示：
 
 
格式示例值
yyyy-MM-dd HH:mm:ss2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒2017年08月18日 20时08分08秒
yyyyMMdd20170818
dd/MM/yyyy18/08/2017
yyyy年M月2017年8月
M月d日8月18日
北京时间：HH点mm分北京时间：20点08分
yyyy年的M月某天晚上，大概H点2017年的8月某天晚上，大概20点
 
 
 
 
codelayui.code
 
 
  1. //自定义日期格式
  2. laydate.render({ 
  3.  elem: '#test'
  4.  ,format: 'yyyy年MM月dd日' //可任意组合
  5. });
  6.  
 

 
value - 初始值 

 
 
类型：String，默认值：new Date()
 
 
支持传入符合format参数设定的日期格式字符，或者 new Date()
 
 
 
 
codelayui.code
 
 
  1. //传入符合format格式的字符给初始值
  2. laydate.render({ 
  3.  elem: '#test'
  4.  ,value: '2018-08-18' //必须遵循format参数设定的格式
  5. });
  6.  
  7. //传入Date对象给初始值
  8. laydate.render({ 
  9.  elem: '#test'
  10.  ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
  11. });
  12.  
 

 
isInitValue - 初始值填充 

 
 
类型：Boolean，默认值：false
 
 
用于控制是否自动向元素填充初始值（需配合 value 参数使用）
 
 
 
 
codelayui.code
 
 
  1. laydate.render({
  2.  elem: '#test'
  3.  ,value: '20170910'
  4.  ,isInitValue: true //允许填充初始值
  5. });
  6.  
 
 

   注意：该参数为 layui 2.3.0 新增。 
 
 

 
min/max - 最小/大范围内的日期时间值 

 
 
类型：string，默认值：min: '1900-1-1'、max: '2099-12-31'
 
 
 设定有限范围内的日期或时间值，不在范围内的将不可选中。这两个参数的赋值非常灵活，主要有以下几种情况： 
 
 
1.如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。这里并非遵循 format 设定的格式
2.如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后
3.如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日
 
 
 
 
示例layui.code
 
 
  1. //日期有效范围只限定在：2017年
  2. laydate.render({ 
  3.  elem: '#test'
  4.  ,min: '2017-1-1'
  5.  ,max: '2017-12-31'
  6. });
  7.  
  8. //日期有效范围限定在：过去一周到未来一周
  9. laydate.render({ 
  10.  elem: '#test'
  11.  ,min: -7 //7天前
  12.  ,max: 7 //7天后
  13. });
  14.  
  15. //日期时间有效范围的设定: 
  16. laydate.render({ 
  17.  elem: '#test'
  18.  ,type: 'datetime'
  19.  ,min: '2017-8-11 12:30:00'
  20.  ,max: '2017-8-18 12:30:00'
  21. });
  22.  
  23. //时间有效范围设定在: 上午九点半到下午五点半
  24. laydate.render({ 
  25.  elem: '#test'
  26.  ,type: 'time'
  27.  ,min: '09:30:00'
  28.  ,max: '17:30:00'
  29. });
  30.  
 
 
毫不保留地说，min和max参数是两个非常强大的存在，合理运用，可帮助用户在日期与时间的选择上带来更为友好的约束与体验。
 

 
trigger - 自定义弹出控件的事件 

 
 
类型：String，默认值：focus，如果绑定的元素非输入框，则默认事件为：click
 
 
 
 
codelayui.code
 
 
  1. //自定义事件
  2. laydate.render({ 
  3.  elem: '#test'
  4.  ,trigger: 'click' //采用click弹出
  5. });
  6.  
 

 
show - 默认显示 

 
 
类型：Boolean，默认值：false
 
 
如果设置: true，则控件默认显示在绑定元素的区域。通常用于外部事件调用控件，如：
 
 
 
 
codelayui.code
 
 
  1. //默认显示
  2. laydate.render({
  3.  elem: '#test'
  4.  ,show: true //直接显示
  5. });
  6.  
  7. //外部事件调用
  8. lay('#test1').on('click', function(e){ //假设 test1 是一个按钮
  9.  laydate.render({
  10.  elem: '#test'
  11.  ,show: true //直接显示
  12.  ,closeStop: '#test1' //这里代表的意思是：点击 test1 所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件
  13.  });
  14. });
  15.  
 

 
position - 定位方式 

 
 
类型：String，默认值：absolute
 
 
用于设定控件的定位方式，有以下三种可选值：
 
 
position 可选值说明
abolute绝对定位，始终吸附在绑定元素周围。默认值
fixed固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。
static静态定位，控件将直接嵌套在指定容器中。 注意：请勿与 show 参数的概念搞混淆。show为 true 时，控件仍然是采用绝对或固定定位。而这里是直接嵌套显示
 
 
下面是一个直接嵌套显示的例子：
 

 

 
 2018年 
 5月 

 

 
 
 
  
 
   
 
    
 
     重置 
     现在 
     确定 
    
 
   
 
  
 
 
 
 
 
  
 
  
codelayui.code
 
  
  1. 【HTML】
  2. <span id="testView"></span>
  3. <div id="test2"></div>
  4.  
  5. 【JS】: 
  6. //嵌套在指定容器中
  7. laydate.render({
  8.  elem: '#test2'
  9.  ,position: 'static'
  10.  ,change: function(value, date){ //监听日期被切换
  11.  lay('#testView').html(value);
  12.  }
  13. });
  14.  
 
 
 

 
zIndex - 层叠顺序 

 
 
类型：Number，默认值：66666666
 
 
一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时，该参数无效。
 
 
 
 
codelayui.code
 
 
  1. //设定控件的层叠顺序
  2. laydate.render({
  3.  elem: '#test'
  4.  ,zIndex: 99999999
  5. });
  6.  
 

 
showBottom - 是否显示底部栏 

 
 
类型：Boolean，默认值：true
 
 
如果设置 false，将不会显示控件的底部栏区域
 
 
 
 
codelayui.code
 
 
  1. //不显示底部栏
  2. laydate.render({
  3.  elem: '#test'
  4.  ,showBottom: false
  5. });
  6.  
 

 
btns - 工具按钮 

 
 
类型：Array，默认值：['clear', 'now', 'confirm']
 
 
右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm
 
 
 
 
codelayui.code
 
 
  1. //只显示清空和确认
  2. laydate.render({
  3.  elem: '#test'
  4.  ,btns: ['clear', 'confirm']
  5. });
  6.  
 

 
lang - 语言 

 
 
类型：String，默认值：cn
 
 
我们内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。这里并没有开放自定义文字，是为了避免繁琐的配置。
 
 
 
 
codelayui.code
 
 
  1. //国际版
  2. laydate.render({
  3.  elem: '#test'
  4.  ,lang: 'en'
  5. });
  6.  
 

 
theme - 主题 

 
 
类型：String，默认值：default
 
 
我们内置了多种主题，theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
 
 
 
 
codelayui.code
 
 
  1. //墨绿背景主题
  2. laydate.render({
  3.  elem: '#test'
  4.  ,theme: 'molv'
  5. });
  6.  
  7. //自定义背景色主题 - 非常实用
  8. laydate.render({
  9.  elem: '#test'
  10.  ,theme: '#393D49'
  11. });
  12.  
  13. //格子主题
  14. laydate.render({
  15.  elem: '#test'
  16.  ,theme: 'grid'
  17. });
  18.  
 
 
另外，你还可以传入其它字符，如：theme: 'xxx'，那么控件将会多出一个 class="laydate-theme-xxx" 的CSS类，以便于你单独定制主题。
 

 
calendar - 是否显示公历节日 

 
 
类型：Boolean，默认值：false
 
 
我们内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。
 
 
 
 
codelayui.code
 
 
  1. //允许显示公历节日
  2. laydate.render({
  3.  elem: '#test'
  4.  ,calendar: true
  5. });
  6.  
 

 
mark - 标注重要日子 

 
 
类型：Object，默认值：无
 
 
calendar 参数所代表的公历节日更多情况下是一个摆设。因此，我们还需要自定义标注重要日子，比如结婚纪念日？日程等？它分为以下两种：
 
 
标注格式说明
每年的日期{'0-9-18': '国耻'}0 即代表每一年
每月的日期{'0-0-15': '中旬'}0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）
特定的日期{'2017-8-21': '发布')-
 
 
可同时设定多个，如：
 
 
 
 
codelayui.code
 
 
  1. //标注重要日子
  2. var ins1 = laydate.render({
  3.  elem: '#test'
  4.  ,mark: {
  5.  '0-10-14': '生日'
  6.  ,'0-12-31': '跨年' //每年12月31日
  7.  ,'0-0-10': '工资' //每个月10号
  8.  ,'2017-8-15': '' //具体日期
  9.  ,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
  10.  ,'2017-8-21': '发布'
  11.  }
  12.  ,done: function(value, date){
  13.  if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
  14.  ins1.hint('中国人民抗日战争胜利72周年');
  15.  }
  16.  }
  17. });
  18.  
 
 
非常实用的存在，是时候利用它制作你的日程表了。
 

 
控件初始打开的回调 

 
 
控件在打开时触发，回调返回一个参数：初始的日期时间对象
 
 
 
 
codelayui.code
 
 
  1. laydate.render({
  2.  elem: '#test'
  3.  ,ready: function(date){
  4.  console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  5.  }
  6. });
  7.  
 

 
日期时间被切换后的回调 

 
 
年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
 
 
 
 
codelayui.code
 
 
  1. laydate.render({
  2.  elem: '#test'
  3.  ,change: function(value, date, endDate){
  4.  console.log(value); //得到日期生成的值，如：2017-08-18
  5.  console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  6.  console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
  7.  }
  8. });
  9.  
 

 
控件选择完毕后的回调 

 
 
点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
 
 
 
 
codelayui.code
 
 
  1. laydate.render({
  2.  elem: '#test'
  3.  ,done: function(value, date, endDate){
  4.  console.log(value); //得到日期生成的值，如：2017-08-18
  5.  console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  6.  console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
  7.  }
  8. });
  9.  
 

 
弹出控件提示 

 
 
事实上，执行核心方法 laydate.render(options) 会返回一个当前实例对象。其中包含一些成员属性和方法，比如：hint方法
 
 
 
 
codelayui.code
 
 
  1. var ins1 = laydate.render({
  2.  elem: '#test'
  3.  ,change: function(value, date, endDate){
  4.  ins1.hint(value); //在控件上弹出value值
  5.  }
  6. });
  7.  
 

 
配置基础路径 

 
 
如果你不是采用 layui 或者普通 script 标签方式加载的 laydate.js，而是采用 requirejs 等其它方式引用 laydate，那么你需要设置基础路径，以便 laydate.css 完成加载。
 
 
 
 
codelayui.code
 
 
  1. laydate.path = '/static/xxx/'; //laydate.js 所在目录
  2.  
  3. //配置好路径后，再调用
  4. laydate.render(options);
  5.  
 

 
其它方法 

方法名备注
laydate.getEndDate(month, year)获取指定年月的最后一天，month默认为当前月，year默认为当前年。如： 
var endDate1 = laydate.getEndDate(10); //得到31 
var endDate2 = laydate.getEndDate(2, 2080); //得到29
 
from http://www.layui.com/doc/modules/laydate.html

                            

                            

                                

                                     类似资料：
                                

                                
                            

                        

                    

                    

                        

                            

                            

                                
相关阅读

                                

                                    将日期插入时代时间来自日期时间的MySQL剥离时间组件bootstrap datetimepicker日期插件超详细使用方法介绍bootstrap日历插件datetimepicker使用方法laydate限定时间控件去除秒
                                

                            

                            

                                
相关文章

                                

                                    VBA日期时间函数PL/SQL日期及时间JSF转换日期时间Pandas日期时间格式化MySQL日期和时间类型
                                

                            

                            

                                
相关问答

                                

                                    将空日期时间值插入SQL表将时间戳插入日期字段（Oracle）使用python获取今日日期时间[重复]使用Json.Net序列化时指定自定义日期时间格式如何在Java中插入日期和时间
                                

                            

                            

                                
相关文档

                                

                                    ASP 官方手册Pandas 官方教程Electron 官方文档Mithril 官方文档yog2 官方文档
                                

                            

                        

                    

                

            

            

    快捷导航：
    新手教程
    算法原理
    架构设计
    Java进阶
    数据库进阶
    大厂专栏
    面试经验
    编程笔记
    编程问答
    所有专题
    文档资料
    工具软件
    电子书籍
    小牛导航
    

    在线工具：
    房贷计算器
    个税计算器
    Linux命令查询
    Json格式化
    正则表达式
    颜色转换
    AES加解密
    SHA1加密
    MD5加密
    毒鸡汤
    字数统计
    随机密码生成
    进制转换
    Base64编解码
    励志句子
    

    Copyright © 2019-2024  小牛知识库@xnip.cn. All Rights Reserved.