最近项目使用了laydate.js这个时间插件。自从这个插件升级后确实还挺好用的,在选择时间上操作非常简单:
laydate.render({
elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});
通过elem绑定元素后,就可以使用了。(记得elem:'#text'中的这个#不要落下)
但是当我做一个时间范围选择时,问题来了:结束时间不能早于开始时间,即选择完开始时间,结束时间应限制开始时间之后。
起初我简单的以为laydate这个插件和vue.js的动态绑定是相同的,所以在done回调函数改laydate的max和min这两个参数,然后想通过调用laydate.render(startTime)重新进行渲染,并不生效。
错误代码如下:
<script>
var startDate = {
elem:'#startTime',
format:'yyyy/MM/dd',
min:'1999-1-1',
max:'2111-1-1',
done: function (value, date) {
endDate.min = value
laydate.render(endDate)
}
}
var endDate = {
elem:'#endTime',
format:'yyyy/MM/dd',
min:'1999-1-1',
max:'2111-1-1',
done: function (value, date) {
startDate.max = value
laydate.render(startDate);
}
}
$(function () {
laydate.render(endDate)
laydate.render(startDate);
})
</script>
发现在选择时间后两个控件并不会重新渲染,在这上面遇到了很大的坑。
网上查资料发现: laydate.render()只是在第一次渲染起作用,不能重新渲染。
看到其他blog发现原来改配置参数之间通过startDate.config.[param]进行对插件配置参数的修改,修改代码如下:
<script>
var startDate = laydate.render({
elem:'#startTime',
format:'yyyy/MM/dd',
min:'1999-1-1',
max:'2111-1-1',
done: function (value, date) {
endDate.config.min ={
year:date.year,
month:date.month-1,
date: date.date,
};
}
})
var endDate = laydate.render({
elem:'#endTime',
format:'yyyy/MM/dd',
min:'1999-1-1',
max:'2111-1-1',
done: function (value, date) {
startDate.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
}
}
})
</script>
这里的month要记得减一。因为回调函数的date.month和config.max.month是不一样的。
后来查资料发现,可以先删除这个laydate实例,再重新创建来达到渲染效果。
laydate 文档:http://www.layui.com/doc/modules/laydate.html
转载:https://blog.csdn.net/wmq1314lql/article/details/81750092