-
layDate有两种方式,一种是如果项目中已经引用了layer框架,可以直接使用,还有一种可以点击此处下载独立的插件
-
下载完成后,首先引入相应的js文件
<script src="/static/laydate/laydate.js"></script>
-
第二步,在页面中添加控件
<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>
-
添加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(); } });
-
相关重要属性说明
-
type-控件选择类型
type属性说明 type可选值 名称 用途 year 年选择器 只提供年列表选择 month 年月选择器 只提供年、月选择 date 日期选择器 可选择:年、月、日。type默认值,一般可不填 time 时间选择器 只提供时、分、秒选择 datetime 日期时间选择器 可选择:年、月、日、时、分、秒 -
range-开启左右面板范围选择
-
默认false 如果设置 true,将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。
format-自定义格式 默认yyyy-MM-dd
-
格式
示例值
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 初始值
- //传入符合format格式的字符给初始值
- laydate.render({
- elem: '#test'
- ,value: '2018-08-18' //必须遵循format参数设定的格式
- });
- //传入Date对象给初始值
- laydate.render({
- elem: '#test'
- ,value: new Date(1534766888000) //参数即为:2018-08-20 20:08:08 的时间戳
- });
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