日期类型 type
year 年选择器 只提供年列表选择
month 年月选择器 只提供年、月选择
date 日期选择器 可选择:年、月、日。type默认值,一般可不填
time 时间选择器 只提供时、分、秒选择
datetime 日期时间选择器 可选择:年、月、日、时、分、秒
日期类型的使用,点击事件
* mark - 标注重要日子
* 每年的日期 {'0-9-18': '国耻'} 0 即代表每一年
每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月(layui 2.1.1/layDate 5.0.4 新增)
特定的日期 {'2017-8-21': '发布')
*/
laydate.render({
elem: "#date20",
type: "date",
mark: {
'0-10-14': '生日'
,'0-0-10': '工资'
,'2017-8-21': '结婚'
},
min: "2021-12-01 09:30:00", //最小值
max: "2021-12-31 18:30:00", //最大值
theme: "#3c3c3c", //背景色
showBottom: false, // showBottom - 是否显示底部栏
trigger: "mouseenter", // 自定义弹出控件的事件
calendar: true, // calendar - 是否显示公历节日
// 点击某一个日期,响应的回调函数
done: function(value, date){
console.log(date);
if(date.year === 2018 && date.month === 9 && date.date === 21){
layer.msg('结婚纪恋日快乐,记得买花');
}
}
change: function(value,date,endate){ //日期选择发生变化事件
}
});
// 日期有效范围限定在:过去一周到未来一周
laydate.render({
elem: "#date11",
min: -7,
max: 7
});
/**
最小/大范围内的日期时间值
如果值为字符类型,则:年月日必须用 -(中划线)分割、时分秒必须用 :(半角冒号)号分割。
如果值为整数类型,且数字<86400000,则数字代表天数,如:min: -7,即代表最小日期在7天前,正数代表若干天后
*/
// 日期时间有效范围的设定
laydate.render({
elem: "#date13",
type: "datetime",
min: "2019-04-01 09:30:00",
max: "2019-04-30 18:30:00"
});
// 时间有效范围设定在: 上午九点半到下午五点半 :
laydate.render({
elem: "#date12",
type: "time",
min: "09:30:00",
max: "18:30:00"
});