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>
如果差一点,那就再努力一点
浙公网安备 33010602011771号