Layui 日期时间控件

1、需要加载模块：laydate https://www.layui.com/laydate/
2、

image.png

3、属性：elem

image.png

type:

image.png

//年选择器
laydate.render({
elem: '#test'
,type: 'year'
});

//年月选择器
laydate.render({
elem: '#test'
,type: 'month'
});

//日期选择器
laydate.render({
elem: '#test'
//,type: 'date' //默认，可不填
});

//时间选择器
laydate.render({
elem: '#test'
,type: 'time'
});

//日期时间选择器
laydate.render({
elem: '#test'
,type: 'datetime'
});

range:范围选择
//年范围选择
laydate.render({
elem: '#test'
,type: 'year'
,range: true //或 range: '~' 来自定义分割字符
});

//年月范围选择
laydate.render({
elem: '#test'
,type: 'month'
,range: true //或 range: '~' 来自定义分割字符
});

//日期范围选择
laydate.render({
elem: '#test'
,range: true //或 range: '~' 来自定义分割字符
});

//时间范围选择
laydate.render({
elem: '#test'
,type: 'time'
,range: true //或 range: '~' 来自定义分割字符
});

//日期时间范围选择
laydate.render({
elem: '#test'
,type: 'datetime'
,range: true //或 range: '~' 来自定义分割字符
});

format 格式

image.png

image.png

value

image.png

image.png

min/max

//日期有效范围只限定在：2017年
laydate.render({
elem: '#test'
,min: '2017-1-1'
,max: '2017-12-31'
});

//日期有效范围限定在：过去一周到未来一周
laydate.render({
elem: '#test'
,min: -7 //7天前
,max: 7 //7天后
});

//日期时间有效范围的设定:
laydate.render({
elem: '#test'
,type: 'datetime'
,min: '2017-8-11 12:30:00'
,max: '2017-8-18 12:30:00'
});

//时间有效范围设定在: 上午九点半到下午五点半
laydate.render({
elem: '#test'
,type: 'time'
,min: '09:30:00'
,max: '17:30:00'
});

trigger 弹出事件

image.png

position

image.png

lang

image.png

theme 主题

image.png

calendar 节日

image.png

mark 标注日子，日程表

image.png

//标注重要日子
var ins1 = laydate.render({
elem: '#test'
,mark: {
'0-10-14': '生日'
,'0-12-31': '跨年' //每年12月31日
,'0-0-10': '工资' //每个月10号
,'2017-8-15': '' //具体日期
,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
,'2017-8-21': '发布'
}
,done: function(value, date){
if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
ins1.hint('中国人民抗日战争胜利72周年');
}
}
});

事件

image.png