做一个简单的网站多少钱,网页qq空间登录入口,技术支持 天空网络-临汾做网站,怎么做网页粗略布局图标题小标题一、错误尝试二、时间控件二次渲染的3种方法2.1 直接删除原来绑定时间控件的DOM#xff0c;再重新渲染#xff08;推荐#xff09;#xff1b;2.2 使用 clone() #xff0c;并且改变 lay-key#xff1b;2.3 使用 clone() #xff0c;并且删除 lay-key#xf…标题小标题一、错误尝试二、时间控件二次渲染的3种方法2.1 直接删除原来绑定时间控件的DOM再重新渲染推荐2.2 使用 clone() 并且改变 lay-key2.3 使用 clone() 并且删除 lay-key推荐三、通过一个按钮清空时间限制不通过二次渲染清空时间控件的时间限制四、清空 range:true 的日期范围控件开始时间和结束时间用的一个输入框的日期范围控件五、使用 laydate 需要注意的地方总结
第一次使用 Layui太多坑需要注意了这里总结一下并且找到了4种清空重置时间控件的方法。
一、错误尝试
这个地方我把 layDate 作为独立组件使用的自己给了一个按钮想让时间控件清空重置想当然的在重置方法里重新渲染时间控件输入框的数据被清空了但是时间控件的时间限制没有被清掉。
div classtimeOrange p选择时间范围/pdiv classtimeOrange-input input typetext classind2 cloneStart idstartTime placeholder开始时间 autocompleteoff readonlyspan - /spaninput typetext classind2 cloneEnd idendTime placeholder结束时间 autocompleteoff readonly/div
/div
script
function loadTime() { //记住 loadTime() 这个函数后面会用到就不再重写了var startT laydate.render({elem: #startTime, //指定元素type: time,format:HH:mm,max: 23:59:59,done: function(value, date){endT.config.min {year: date.year,month: date.month -1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: 0}}});var endT laydate.render({elem:#endTime,type: time,format:HH:mm,done: function(value, date){startT.config.max {year: date.year,month: date.month -1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: 0}}});
}
loadTime();//重置操作
$(button:first).click(function(){$(#startTime).val(); //清空开始时间输入框$(#endTime).val(); //清空结束时间输入框//或者通过each循环选到所有input//$(input).each(function(){// $(this).val(); //使所有输入框的值为空//});loadTime(); //再次渲染日期与时间控件
})
/script网上查资料知道laydate.render() 只是在第一次渲染起作用不能重新渲染。要想重新渲染需要删除元素再重新插入这个元素。 二、时间控件二次渲染的三种方法
2.1 直接删除原来绑定时间控件的DOM再重新渲染
//重置操作
$(button:first).click(function(){$(#startTime).remove(); //删除开始时间的input元素$(#endTime).remove(); //删除结束时间的input元素$(.timeOrange-input span).before(input typetext classind2 cloneStart idstartTime placeholder开始时间 autocompleteoff readonly); $(.timeOrange-input span).after(input typetext classind2 cloneEnd idendTime placeholder结束时间 autocompleteoff readonly);loadTime(); //再次渲染日期与时间控件
})这种方法是最直观有效的我个人不想要这种直接插入一个完整DOM元素的写法 2.2 使用 clone() 并且改变 lay-key
jQuery中有一个 clone() 的方法它可以用来克隆元素给这个方法添加参数 true就可以克隆该元素身上的方法即clone(true)。
1. 直接克隆元素 直接删除原来的元素再插入 clone(true) 后的时间控件的元素和方法然后重新渲染重置后再点击输入框时间控件不会再弹出来。
//重置操作
$(button:first).click(function(){$(#startTime).val(); //清空开始时间输入框$(#endTime).val(); //清空结束时间输入框var cloneStartTime $(.cloneStart).clone(true); //由于id的唯一性最好克隆class名称var cloneEndTime $(.cloneEnd).clone(true);$(#startTime).remove(); //删除开始时间的input元素$(#endTime).remove(); //删除结束时间的input元素$(.timeOrange-input span).before(cloneStartTime); //插入克隆元素$(.timeOrange-input span).after(cloneEndTime);loadTime(); //再次渲染日期与时间控件
})2. 只改写 lay-key 经过一番查阅在博主 落枫_rain 的博客上看到 lay-index 这个属性他说了一下个人理解“laydate渲染后所附带的 lay-index 会被载入缓存所以再次渲染时不会重新去渲染。所以修改 lay-index 标识的值让它在渲染器眼里变成一个新的组件即可去重新渲染它”。
因此我打开控制台发现 laydate 给每个绑定时间控件的元素加了一个 lay-key的属性和属性值。 根据他的提示以及代码我只改变 lay-key 的值点击按钮后时间控件可以被弹出来但是时间限制还是没有被清空掉。
//重置操作
$(button:first).click(function(){$(#startTime).val(); //清空开始时间输入框$(#endTime).val(); //清空结束时间输入框var startKey parseInt($(#startTime).attr(lay-key)) 2; //这里的值加多少主要看你有几个时间控件var endKey parseInt($(#endTime).attr(lay-key)) 2;$(#startTime).attr(lay-key, startKey); //改写绑定时间控件的元素中 lay-key 的值$(#endTime).attr(lay-key, endKey);loadTime(); //再次渲染日期与时间控件
})3. 最终写法 于是结合了二者发现达到了重置效果。
//重置操作
$(button:first).click(function(){$(#startTime).val(); //清空开始时间输入框$(#endTime).val(); //清空结束时间输入框var startKey parseInt($(#startTime).attr(lay-key)) 2; //这里的值加多少主要看你有几个时间控件var endKey parseInt($(#endTime).attr(lay-key)) 2;var cloneStartTime $(.cloneStart).clone(); //因为要重新渲染所有可以不用加truevar cloneEndTime $(.cloneEnd).clone();cloneStartTime.attr(lay-key, startKey); //注意这里要给克隆的元素添加cloneEndTime.attr(lay-key, endKey);$(#startTime).remove(); //删除原本的input元素$(#endTime).remove(); $(.timeOrange-input span).before(cloneStartTime); //插入克隆元素$(.timeOrange-input span).after(cloneEndTime);loadTime(); //再次渲染日期与时间控件
})2.3 使用 clone() 并且删除 lay-key
第二种方法可行但是代码量较多还不如第一种于是又去找了找其他资料信息主要参考了 https://www.freesion.com/article/87466321/这里提出了删除克隆元素中的 lay-key 的方法。
//重置操作
$(button:first).click(function(){$(#startTime).val(); //清空开始时间输入框$(#endTime).val(); //清空结束时间输入框var cloneStartTime $(.cloneStart).clone(); //由于id的唯一性最好克隆class名称var cloneEndTime $(.cloneEnd).clone();cloneStartTime.removeAttr(lay-key); //注意这里要给克隆的元素添加cloneEndTime.removeAttr(lay-key);$(#startTime).remove(); //删除原本的input元素$(#endTime).remove(); $(.timeOrange-input span).before(cloneStartTime); //插入克隆元素$(.timeOrange-input span).after(cloneEndTime);loadTime(); //再次渲染日期与时间控件
})在 2.2 中我们可以知道laydate 给每个绑定时间控件的元素加了一个 lay-key属性和属性值。所以这里删除 lay-key再渲染时间控件时laydate 会给时间控件重新绑定一个 lay-key属性和属性值。
其实这一点 在 2.1 中就有体现 ① 首次渲染时laydate 给 input#startTime 和 input#endTime 添加了lay-key属性和属性值 ② 点击重置按钮后当我们删除 input#startTime 和 input#endTime 这两个DOM 元素时就连同它们上面的lay-key 和它的值也被删除了 ③ 然后我们再通过 before() 和 after() 插入元素 input typetext classind2 cloneStart idstartTime ...可以观察到我们在插入元素时并没有给这个元素添加 lay-key 属性。 ④ 最后 使用 loadTime() 再次渲染时间控件渲染后给绑定的元素身上又添加了一个 lay-key属性和属性值。 三、通过一个按钮清空时间限制
除了上面3种强制重置时间控件并且二次渲染的写法外如果只是想清空时间限制可以采用下面的这种写法这里是根据 十七gril 的博客得到的启发。
var startT laydate.render({ //把渲染元素var一下保存起来elem: #startTime, //指定元素type: time,format:HH:mm,max: 23:59:59,done: function(value, date){ endT.config.min {year: date.year,month: date.month -1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: 0}}
});var endT laydate.render({elem:#endTime,type: time,format:HH:mm,done: function(value, date){startT.config.max { //注意开始时间是maxyear: date.year,month: date.month -1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: 0}}
});
}
//重置操作
$(button:first).click(function(){$(#startTime).val(); //清空开始时间输入框$(#endTime).val(); //清空结束时间输入框 var d new Date();startT.config.max { //注意开始时间是maxyear: d.getFullYear(), //获取当前的年month: d.getMonth(), //获取当前的月date: d.getDate,hours: 23, //开始时间最大小时位23minutes: 59,seconds: 59}endT.config.min {year: d.getFullYear(),month: d.getMonth(),date: d.getDate,hours: 0,minutes: 0,seconds: 0}
})四、清空 range:true 的日期范围控件
有了上面的方法清空日期范围控件就很简单了。
div classlayui-input-inline date-inputinput typetext namedate iddate autocompleteoff classlayui-input date-icon placeholder请选择时间范围
/div// 日期范围 初次渲染
laydate.render({elem: #date,range: true,value: ,done: function(value, date, endDate){console.log(value,date,endDate);}
});//点击按钮清空日期范围控件
$(.searchBtn).on(click, function(){clearDate();
})//清空date日期范围控件
function clearDate(){ //删除原本的input元素清除日期控件的缓存再到DOM中插入日期控件并渲染$(#date).remove(); //删除开始时间的input元素$(.date-input).append(input typetext namedate iddate autocompleteoff classlayui-input date-icon placeholder请选择时间范围)//再次渲染日期时间范围laydate.render({elem: #date,range: true,done: function(value, date, endDate){console.log(value,date,endDate);}});
}五、使用 laydate 过程中需要注意的地方
这里在 layui清空时间控件后无法使用的解决方法 上补充几点
5.1 laydate.render 无法重复渲染
当 laydate.render 对应一个elem已经渲染过一次之后我们是无法通过再次渲染来修改其中的 max值 与 min值 的。 5.2 startT.config.max 与 endT.config.min 是一个对象不是一个字符串
不同于我们渲染时直接写时间限制的 min: 00:00:00 与 max:23:59:59 startT.config.max 是一个对象直接 startT.config.max 2019-02-16 这样赋值是没有效果的。
当我们不清楚一个变量值时可以把它打印出来
var startT laydate.render({elem: #startTime, //指定元素type: time,format:HH:mm,max: 23:59:59,done: function(value, date){console.log(选择时间后的date,date)console.log(选择时间后的startT.config.max,startT.config.max)}}
});
console.log(首次打印startT.config,startT.config);现在是2021.2.8可以清楚的看到startT.config.max 与 startT.config.min 中的max、min都属于 startT.config 的属性它们的值是一个对象。
有一点比较懵我直接 console.log(首次打印startT.config.max,startT.config.max); 刷新时会在字符串和对象之前转换。如果设置了 max: 23:50:56字符串就是设置的值若没有设置字符串就是max 的默认值。 5.3 done回调函数中的参数 date 的格式与 startT.config.min 格式相同但是直接让 startT.config.mindate 可能会出问题
虽然 date 中的数据是你选择的日期但是 startT.config.min 中设置的 month 的值比你输入的month 的要值大了一个月。
从4.2 中的截图我们可以看到现在是 2021.5.8done 中的 month 为 5而 startT.config.max 中的 month 为 4因此当你使用 done 中的参数 date 给 startT.config.max 设置月份时date.month 需要减一。 5.4 日期与时间控件闪没
https://www.cnblogs.com/wfbky/p/13132687.html 当页面高度不够时高度不够指的是 input输入框下面的页面高度 小于 时间控件的高度时间控件点击以后 会闪没当退出页面 再返回以后时间控件正常出现
解决方法将触发 方法 改为 click。
laydate.render({elem: #date,trigger: click
});效果无论是否 高度足够均可以出现 控件 当高度不够时会遮挡 input输入框。
laydate插件之坑——渲染问题【删除再渲染】 LAYUI前框框架laydate日期组件重新渲染【lay-key的问题】 layui清空时间控件后无法使用的解决方法【3个坑】 关于layui踩过的坑
