效果:
今日此时此刻之前的日期、时间禁止选用，切换日期和时间为“2024-10-19 00:00:00"，再切换为”2024-10-18 00:00:00"时， 会给form.time默认赋值为今日此时此刻（日期时间少于今日此时此刻则重新赋值）
安装插件:(不要看到安装插件就走了,操作起来试试,效果还是不错的)
npm install moment页面引入:(在使用页面引入就行)
import moment from 'moment'; // 引入 moment.jsHTML标签代码:
<el-date-picker
v-model="form.time"
type="datetime"
placeholder="选择日期时间"
style="width:100%"
:picker-options="{
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
},
selectableRange: startTimeRange,
}"
></el-date-picker>方法代码:
data () {
return {
form: {
time: null,
},
startTimeRange: '',
}
},
mounted () {
let st = moment(new Date().getTime()).format('HH:mm:ss')
this.startTimeRange = st + ' - 23:59:59'
},
watch: {
//监听的值改成你的时间值
'form.time': {
handler(newValue, oldValue) {
if (newValue) {
let date = moment(Date.now()).startOf('day').format('YYYY-MM-DD')
let dateTime = moment(new Date().getTime()).format('HH:mm:ss')
let newVal = moment(newValue).format('YYYY-MM-DD')
let st = ''
if (newVal == date) {
// 是今天, 选择的时间开始为此刻的时分秒
st = dateTime
// 切换日期的时候，如果日期为今天，且时间少于当前时间，则设为今日当前时间
if (new Date(newValue).getTime() < new Date().getTime()) {
//这个位置的参数别忘了改
this.$set(this.form, 'time', moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'))
}
} else {
// 明天及以后从0时开始
st = '00:00:00'
}
this.startTimeRange = st + ' - 23:59:59'
}
}
deep:true
}
},大概就这样吧,效果不错,就是搬运起来麻烦点,
参考文献:element日期时间组件如何让用户此刻之前的日期与时间不能选择 - rachelch - 博客园
赠送内容:
安装插件后如果报错:
ERROR Failed to compile with 87 errors 上午10:25:40
This dependency was not found:
* vue in ./node_modules/@riophae/vue-treeselect/dist/vue-treeselect.cjs.js, ./node_modules/element-ui/lib/popover.js and 85 others
To install it, you can run: npm install --save vue就把项目中package-lock.json删掉,,然后 从新执行 npm install 就回来了并且也不报错了
