VUE学习所遇问题【el-date-picker】限制了时间范围,就无法使用'此刻'按钮的效果
最开始遇到的问题是:
el-date-picker组件需要只能选择昨天与今天的时间信息
初版代码:
<el-date-picker v-model="formData.withdrawTime" type="datetime" placeholder="请选择时间" :picker-options="datetimePickerOptions" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable @change="onWithdrawTimeChange" />
datetimePickerOptions: { disabledDate(time) { const now = new Date(); now.setHours(0, 0, 0, 0); // 清除时分秒 return time.getTime() > now.getTime() || time.getTime() < now.setDate(now.getDate() - 1); // 限制只能选择昨天或今天 }, },
但需要的问题是,此组件有个此刻按钮,点击了没有赋值。
经一番查询发现如果设置了禁止选择未来日期,可能会导致‘此刻’按钮无响应。所以找到了一个共存的办法,既能限制日期,又能点击此刻按钮,代码如下datetimePickerOptions: { disabledDate(time) {
const now = new Date(); const endOfToday = new Date();
//定义当天的结束时间 endOfToday.setHours(23, 59, 59, 999);
//定义昨天的开始时间 const startOfYesterday = new Date(); startOfYesterday.setDate(now.getDate() - 1); startOfYesterday.setHours(0, 0, 0, 0);
//清零now
的时间部分 now.setHours(0, 0, 0, 0); // 清除时分秒
//禁用条件 return time.getTime() < startOfYesterday.getTime() || time.getTime() > endOfToday.getTime(); }, },