14.日历和时间

学习要点:
1.基本使用
2.回调使用
本节课我们来开始了解 Layui 的内置模块:日历和时间。
一.基本使用
1. laydate 模块,可以在选择表单时弹出日历和时间让其选择并输入到表单;

layui.use(['laydate'], () => {
const laydate = layui.laydate
//日历模块
laydate.render({
elem : '#date' //绑定表单
})
})
2. type 属性,可以设置模块的类型选择:year、month、date、time 和 datetime;
laydate.render({
elem : '#date',
type : 'year' //默认 date
})
3. range 属性,可开启范围选择,即左右两个面板;
laydate.render({
elem : '#date',
range : '~'
})
4. format 属性,可以设置自定义格式,全部格式样式请对照手册;
laydate.render({
elem : '#date',
format : 'yyyy 年 MM 月 dd 日'
})
5. value 属性,可以设置表单默认值,但必须遵循 format 格式;
laydate.render({
elem : '#date',
value : '2030 年 01 月 01 日'
})
6. isInitValue 属性,配合 value 属性,是否运行初始值填充;
laydate.render({
elem : '#date',
isInitValue : true
})
7. min、max 属性,设置最大值最小值;
laydate.render({
elem : '#date',
min : '2018-1-1',
max : '2022-1-1'
})
8. trigger 属性,可以切换触发方法,默认 focus;
laydate.render({
elem : '#date',
trigger : 'dblclick'
})
9. show 属性,是否初始就显示日历框,默认 false;
laydate.render({
elem : '#date',
show : true
})
PS:剩下还有一些雷同,可对照手册自行验证:
(1).showButton:是否显示底部按钮;
(2).btns:三个按钮的设置;
(3).lang:设置面板语言(cn,en);
(4).theme:设置主题(4 种方式);
(5).calendar:是否显示公历;
(6).mark:标注重要日子;
(7).position:定位方式,嵌入容器中;
(8).zIndex:层叠顺序设置; 二.基本使用
1. ready 方法,日历控件被初始打开的时候会触发回调;
laydate.render({
elem : '#date',
ready(date) {
console.log(date)【十天精品课堂系列】 主讲:李炎恢
}
})
2. change 方法,日历控件被切换时的时候会触发回调;
laydate.render({
elem : '#date',
range : '~',
change(value, date, endDate) {
console.log(value)
console.log(date)
console.log(endDate)
}
})
3. done 方法,日历控件选择结束的时候会触发回调;
laydate.render({
elem : '#date',
range : '~',
done(value, date, endDate) {
console.log(value)
console.log(date)
console.log(endDate)
}
})

你可能感兴趣的:(JavaScript,java,javascript,前端)