layui常用插件(二) 时间插件
阅读原文时间:2023年07月10日阅读:2

html

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)才会返回。对象成员同上。
}