layui清除时间控件后不可用的解决方案
发布时间： 2020-06-16 13:26:16
来源：亿速云
阅读： 397
作者：鸽子
解决layui时间控件清空后无法正常使用的问题，以及时间范围选择。
解决方法有两种。
方式一(layui 1.x ) :
html代码：
placeholder='开始时间(修改时间) '
placeholder='结束时间(修改时间) '
js代码： var start={
is time :真，
格式： ' yyyy-mm-ddhh : mm : ss '，
max : ' 2099-06-162336059336059 '，
istoday: true，
选择：功能(数据) {
end.min=datas； //选择开始日期后，重置结束日期的最小日期
}
(；
var end={
is time :真，
格式： ' yyyy-mm-ddhh : mm : ss '，
max : ' 2099-06-162336059336059 '，
istoday: true，
选择：功能(数据) {
start.max=datas； //选择结束日期后，重置开始日期的最大日期
}
(；
document.getelementbyid (start _ time ) (.onclick=function ) ) {
start.elem=this；
laydate(start )；
(；
document.getelementbyid (end _ time ).onclick=function ) {
end.elem=this；
lay date (结束；
(；
方式2(laYUI2.x ) :
html代码
placeholder='开始时间(修改时间) '
placeholder='结束时间(修改时间) '
js代码layui.use(['laydate']，function ) )。
var $=layui.$；
var laydate=layui.laydate；
var nowTime=new Date ().valueOf )；
var max=null；
var start=laydate.render({ (
elem: '#start_time '，
类型： ' datetime '，
最大： nowtime，
btns: ['clear '，' confirm']，
done :功能(value，date ) {
endMax=end.config.max；
end.config.min=date；
end.config.min.month=date.month-1；
}
)；
var end=laydate.render({ (
elem: '#end_time '，
类型： ' datetime '，
最大： nowtime，
done :功能(value，date ) {
if($.Trim(value )==' ' ) {
var curDate=new Date (；
date={ ' date ' : curdate.getdate (、' month': curDate.getMonth )、' year': curDate.getFullYear )和'
}
start.config.max=date；
start.config.max.month=date.month-1；
}
)；
根据开始时间动态限制结束时间的知识点type: 'datetime '是具有时分秒的date，不具有时分秒
layui.use(laydate )，function ) )。
/*lay('.layui-input ' ).each (功能) )。
laydate.render({ (
elem: this
，trigger: 'click '
、change:function(value、date、endDate ) {
控制台. log (value； 获得//日期生成的值。 例如，2017-08-18
控制台. log (date； //得到日期和时间的对象。 {year: 2017，month: 8，date: 18，hours: 0，minutes: 0，seconds: 0}
控制台. log (结束日期； //必须结束的日期和时间对象只有在启用“范围选择”(range: true )后才能返回。 对象成员同上。
}
)；
)； */
var $=layui.$；
var laydate=layui.laydate；
var nowTime=new Date ().valueOf )；
var max=null；
var start=laydate.render({ (
elem: '#start_time '，
类型： ' datetime '，
btns: ['clear '，' confirm']，
done :功能(value，date ) {
endMax=end.config.max；
end.config.min=date；
end.config.min.month=date.month-1；
(，
变更：功能(值、日期、结束日期) {
var timestamp2=date.parse (new date ) value )；
timestamp2=timestamp2/1000；
end.config.min=timestamp2；
end.config.min.month=date.month-1；
}
)；
var end=laydate.render({ (
elem: '#end_time '，
类型： '日期'，
done :功能(value，date ) {
console.log('======' date )
if($.Trim(value )==' ' ) {
var curDate=new Date (；
date={ ' date ' : curdate.getdate (、' month': curDate.getMonth )、' year': curDate.getFullYear )和'
}
start.config.max=date；
start.config.max.month=date.month-1；
}
)；
)；
通过以上代码，可以动态变更开始时间的最大值和结束时间的最小值。 接下来，对容易遇到的孔进行说明。
坑1:laydate.render不能重复渲染。 laydate.render渲染一次(对应于elem )后，重新渲染不能更改最大值和最小值。
坑二： startDate.config.max和endDate.config.min是一个对象，不是一个字符串。 我在网上看到有人不负责任地说了这样的话。 endDate.config.min='2017-01-01说可以设置，我居然相信他的邪了掉进了洞里。 这里得到的是对象，与我们渲染时的最小和最大不同，直接分配字符串必然没有效果。
坑三) dates的格式与endDate.config.min相同，但是直接设置为endDate.config.min=dates，你想要的结果是dates的数据不是你选择的日期但是，因为endDate.config.min中设置的month值比输入的month值大一个月，所以如果你选择的开始日期是11月13日，直接分配给endDate.config.min后因此，在dates中