Ant DataPIcker 禁用时间和日期的方法
<template> <div> <a-date-picker style="width: 100%" show-time v-decorator="[ 'nextPmTime', { rules: [ { required: true, message: $t('lang.placeholder.nextPmTime'), }, ], }, ]" placeholder="请输入谢谢" :disabled-date="disabledDate" :disabled-time="disabledDateTime" valueFormat="YYYY-MM-DD HH:mm:ss" > <!-- show-time 是否增加时间选择功能 v-decorator 相当于V-Model不会使用v-decorator建议使用V-Model placeholder 输入框提示文字 disabled-date 不可选择的日期 disabled-time 不可选择的时间 valueFormat 格式化传给后台的值 --> </a-date-picker> </div> </template> <script> // 引入moment插件 灰常重要 import moment from "moment"; export default { methods: { // 禁用日期,返回true 就禁用掉 disabledDate(current) { return current && current <= moment().startOf("day"); // 当前时间之前的所有日期都禁用 }, // 禁用时间调用的公共方法 range(start, end) { const result = []; for (let i = start; i < end; i++) { result.push(i); } return result; }, // 禁用时间,返回true 就禁用掉 disabledDateTime(data) { let strtime; let newTime; data ? (strtime = new Date(data._i.replace(/-/g, "/"))) : (strtime = moment()); data ? (newTime = moment()) : (newTime = moment().add(1, "days").startOf("day")); let hours = moment().hours(); //0~23 let minutes = moment().minutes(); //0~59 let seconds = moment().seconds(); //0~59 //当日只能选择当前时间之后的时间点 if (strtime <= newTime) { return { disabledHours: () => this.range(0, 23).splice(0, hours), disabledMinutes: () => this.range(0, 59).splice(0, minutes), disabledSeconds: () => this.range(0, 59).splice(0, seconds), }; } }, }, }; </script>
如果差一点,那就再努力一点