layui常用插件(二) 时间插件

日期和时间

html

<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  <input type="text" class="layui-input" id="test1">
</div>

js

layui.use(['carousel','laydate'], function() {
        var carousel = layui.carousel,
         laydate = layui.laydate;

        //常规轮播
        carousel.render({
            elem: '#test1'
           /* ,full:true*/
          /*  ,width: '100%' //设置容器宽度
            ,height: '100%' //设置容器高度*/
            , arrow: 'always'//始终显示箭头
            ,anim: 'default' //切换动画方式
            ,interval:'1000'//自动切换的时间间隔,不能低于800
            ,indicator:'inside'//指示器位置,如果设定了 anim:'updown'，该参数将无效
           /* ,arrow:'hover'*/
        });
        laydate.render({
            elem: '#test2' //指定元素
            ,type:'date'
            /*,range: true*/
            ,format:'yyyy-MM-dd'//默认格式
            ,value: new Date()//初始默认时间 2020-02-22
            ,min: '2017-1-1'
            ,max:  0
            ,theme: '#393D49'
            ,ready: function(date){
                console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            }
            ,change: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
            }
            ,done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
               
            }
        });
    })

如果运用layui多个插件，在定义用这种方式

 

 

 时间与日期常用属性

type：
year；   //年选择器
month；  //年月选择器
date；   //日期选择器(默认)
time;   //时间选择器、
datetime;  //日期时间选择器，可选择：年、月、日、时、分、秒

range:
范围选择
如果设置 true，将默认采用 “ - ” 分割。 你也可以直接设置 分割字符 ：range: '~'



format
自定义格式：yyyy-MM-dd HH:mm:ss

value：初始值

min/max:最小/最大范围内的日期值
如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。这里并非遵循 format 设定的格式
如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后
如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日

触发事件

//打开控件时触发 
,ready: function(date){
    console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  }
//年月日时间被切换时都会触发，回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
 ,change: function(value, date, endDate){
    console.log(value); //得到日期生成的值，如：2017-08-18
    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
  }
//点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
,done: function(value, date, endDate){
    console.log(value); //得到日期生成的值，如：2017-08-18
    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
  }