layDate的使用

1. layDate有两种方式,一种是如果项目中已经引用了layer框架,可以直接使用,还有一种可以点击此处下载独立的插件

2. 下载完成后,首先引入相应的js文件

   <script src="/static/laydate/laydate.js"></script> 

3. 第二步,在页面中添加控件

   <div class="layui-inline">
       <div class="layui-input-inline">
           <label class="layui-form-label">日期选择</label>
           <input type="text" class="layui-input" id="dateinput"  placeholder="点击选择日期">    
       </div>
   </div>

    

4. 添加js文件渲染控件

   laydate.render({
           elem: '#dateinput', #指定元素
           value: adminChooseDate, #初始值 
           istime: true, 
           type:'date', #控件选择类型,
           theme: 'molv'  #主题,可供选择,也可以用颜色
           ,done: function(value, date, endDate){
               window.location.href='/admin/getLog?date='+value+'&a='+new Date();
           }
       });

    

5. 相关重要属性说明

   1. 　type-控件选择类型

      type属性说明

      type可选值	名称	用途
      year	年选择器	只提供年列表选择
      month	年月选择器	只提供年、月选择
      date	日期选择器	可选择：年、月、日。type默认值，一般可不填
      time	时间选择器	只提供时、分、秒选择
      datetime	日期时间选择器	可选择：年、月、日、时、分、秒

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

   3. 默认false
      如果设置 true，将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。

       format-自定义格式 默认yyyy-MM-dd

1. 1. 格式	示例值
      yyyy-MM-dd HH:mm:ss	2017-08-18 20:08:08
      yyyy年MM月dd日 HH时mm分ss秒	2017年08月18日 20时08分08秒
      yyyyMMdd	20170818
      dd/MM/yyyy	18/08/2017
      yyyy年M月	2017年8月
      M月d日	8月18日
      北京时间：HH点mm分	北京时间：20点08分
      yyy年的M月某天晚上，大概H点	2017年的8月某天晚上，大概20点

　　　　　　4. value  初始值

1. //传入符合format格式的字符给初始值
2. laydate.render({
3. elem: '#test'
4. ,value: '2018-08-18' //必须遵循format参数设定的格式
5. });
7. //传入Date对象给初始值
8. laydate.render({
9. elem: '#test'
10. ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
11. });

 　　　　5. 获取用户选择的时间　

laydate.render({
  elem: '#test'
  ,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）才会返回。对象成员同上。
  }
});

　　其他属性详见LayUI官网

转载于:https://www.cnblogs.com/tianliuyang/p/9415184.html