发表于： 2021-04-26 19:53:51
2 1979
今天完成的事情：使用了laydate日历控件
明天计划的事情：完成任务
收获：
如何使用laydata日历控件
简单的使用方法可以看文档https://www.layui.com/doc/modules/laydate.html
这里说一下怎么动态的使用
首先声明两个变量并在ngOnInit（）创建两个日历控件
public start: any;
public end: any;
this.start = laydate.render({
elem: '#start', //绑定元素
showBottom: false, //是否有底栏按钮组
theme: '#ccc', //主题颜色
})
this.end = laydate.render({
elem: '#end',
showBottom: false,
theme: '#ccc',
})
接着选择时间后用done来获取时间，并给另一个控件设置最大或最小时间
this.start = laydate.render({
elem: '#start',
showBottom: false,
theme: '#ccc',
done: (value: string, dates: any) => {
var date = new Date(value);
this.startAt = date.valueOf();
this.end.config.min = {
year: dates.year,
month: dates.month - 1,
date: dates.date,
hours: 0,
minutes: 0,
seconds: 0
};
this.end.config.start = {
year: dates.year,
month: dates.month - 1,
date: dates.date,
hours: 0,
minutes: 0,
seconds: 0
};
}
})
最后清空按钮把input内容删除，把最大最小时间删除
clear() {
var x = document.getElementById('start') as HTMLInputElement
x.value = ''
var y = document.getElementById('end') as HTMLInputElement
y.value = ''
this.end.config.min = {
year: 1921,
month: 4,
date: 26,
hours: 0,
minutes: 0,
seconds: 0
};
this.start.config.max = {
year: 2121,
month: 4,
date: 26,
hours: 0,
minutes: 0,
seconds: 0
};
this.end.config.start = {
year: 2121,
month: 4,
date: 26,
hours: 0,
minutes: 0,
seconds: 0
};
}
返回列表
评论