layDate的使用

假如想象 提交于 2019-12-17 07:19:17
  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. 格式

      示例值

      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. });
  6. //传入Date对象给初始值
  7. laydate.render({
  8. elem: '#test'
  9. ,value: new Date(1534766888000) //参数即为:2018-08-20 20:08:08 的时间戳
  10. });

     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官网

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!