layui.laydate时间控件

主要功能：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。
模块加载名称：laydate，独立版本：http://www.layui.com/laydate/

一·基础参数选项
通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数.
elem - 绑定元素是必填项；用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象
laydate.render({
elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});

二·type - 控件选择类型：用于单独提供不同的选择器类型

年选择器

年月选择器

时间选择器

日期时间选择器

三·range - 开启左右面板范围选择
类型：Boolean/String，默认值：false

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

image.png

laydate.render({
elem: '#test6'
,range: true
});
四·format - 自定义格式：类型：String，默认值：yyyy-MM-dd；通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

image.png

image.png

//自定义日期格式
laydate.render({
elem: '#test'
,format: 'yyyy年MM月dd日' //可任意组合
});
五·value - 初始值：类型：String，默认值：new Date()
//传入符合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 的时间戳
});
六·控件初始打开的回调
控件在打开时触发，回调返回一个参数：初始的日期时间对象
laydate.render({
elem: '#test'
,ready: function(date){
console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
}
});
七·日期时间被切换后的回调
年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
laydate.render({
elem: '#test'
,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）才会返回。对象成员同上。
}
});
八·控件选择完毕后的回调
点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
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）才会返回。对象成员同上。
}
});
九·弹出控件提示
事实上，执行核心方法 laydate.render(options) 会返回一个当前实例对象。其中包含一些成员属性和方法，比如：hint方法
var ins1 = laydate.render({
elem: '#test'
,change: function(value, date, endDate){
ins1.hint(value); //在控件上弹出value值
}
});
十·其他

image.png