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）才會返回。對象成員同上。
  }