django网站开发实例,工地建筑模板尺寸,网站开发人员介绍,360模板网文章目录 此刻按钮失效原因#xff1a;使用了禁用未来日期解决办法#xff1a;重写此刻按钮点击事件代码#xff08;包含禁用未来日期和时分秒的处理#xff09;框出主要代码#xff08;因为包含禁用日期功能#xff09;#xff08;取你所需#xff09; 此刻按钮失效原… 文章目录 此刻按钮失效原因使用了禁用未来日期解决办法重写此刻按钮点击事件代码包含禁用未来日期和时分秒的处理框出主要代码因为包含禁用日期功能取你所需 此刻按钮失效原因使用了禁用未来日期
尝试将禁用日期延后几分钟这样确实可用。如果禁用未来日期的同时你又限制了时分秒(selectableRange)的选项那设置延后也没用。 但是这样的操作又与禁用日期冲突但是找到了问题原因。
vue源码中此刻按钮的操作
解决办法重写此刻按钮点击事件
我研究了很久没有从官方文档找到有效的解决办法。 只能通过事件重写来解决此问题了
代码包含禁用未来日期和时分秒的处理
此代码是基于这篇文章做的优化 el-datepicker禁用未来日期包含时分秒type‘datetime’
templatediv classhelloel-date-pickerv-modeltimerefdatePickertypedatetime:picker-options{disabledDate(time) {const nowTime new Date()return new Date(time).getTime() nowTime.getTime() 1 * 60 * 1000},selectableRange}changechangeDatefocusdateFocusblurdateBlur/el-date-picker/div
/templatescript
export default {name: HelloWorld,data() {return {time: ,selectableRange: 00:00:00-23:59:59,timer: null}},watch: {time(newTime, oldTime) {// 在滚动选择时分秒的时候也会被 watch 监听到// 在这里判断 如果年月日相同就不再去更新。const sameDay new Date(newTime).toLocaleDateString() new Date(oldTime).toLocaleDateString()if (sameDay) returnthis.updateSelectableRange()}},methods: {// 日期选择框聚焦重写事件// 聚焦后才会弹出日期选择框// 所以使用 $nextTick 等待日期选择窗口挂载后去操作domasync dateFocus() {await this.$nextTick()const btn document.querySelector(.el-picker-panel.el-popper .el-picker-panel__footer span)btn btn.addEventListener(click, this.changeToNow)},// 重写此刻方法changeToNow() {const datePicker this.$refs.datePicker// 更新 timethis.time new Date().toLocaleString().replaceAll(/, -)// 切换日期后主动更新selectableRange及时更新时分秒的禁用范围this.updateSelectableRange()// 在隐藏日期选择器之前接触绑定事件this.dateBlur()// 隐藏日期选择框datePicker.hidePicker()},// 失去焦点接触事件绑定dateBlur() {const btn document.querySelector(.el-picker-panel.el-popper .el-picker-panel__footer span)btn btn.removeEventListener(click, this.changeToNow)},updateSelectableRange() {const nowTime new Date()const isSame new Date(this.time).toLocaleDateString() nowTime.toLocaleDateString()this.clearTimer()if (isSame) {this.selectableRange 00:00:00-${nowTime.getHours()}:${nowTime.getMinutes()}:${nowTime.getSeconds()}// 创建一个定时器每分钟更新去更新一次禁用范围。const delay 60 - nowTime.getSeconds()this.timer setTimeout(() {this.updateSelectableRange()}, delay * 1000)return}this.selectableRange 00:00:00-23:59:59},clearTimer() {if (this.timer) {clearTimeout(this.timer)this.timer null}},changeDate() {// 选中日期之后清除掉定时器this.clearTimer()}}
}
/script框出主要代码因为包含禁用日期功能取你所需
