需求:格式 YYYY-MM-DD HH:mm:ss 时间默认填充 00:00:00;不可选在当前时间以前
的日期时间,举例:当前时间 2024 年 2 月 2 日 16:40:01 ,如提交日期为 2024 年 2 月 2 日00:00:00,属于不可提交当前时间之前的日期时间。
实现效果
<a-date-picker
format="YYYY-MM-DD HH:mm:ss"
valueFormat="YYYY-MM-DD HH:mm:ss"
:disabled-date="disabledDate"
:disabled-time="disabledDateTime"
:show-time="true"
:disabled="!!id"
@panelChange="handlePanelChange"
@change="handleDateChange"
v-decorator="['effectiveTime', {rules:[{required: true,message:'请选择申报限重申报日期'}]}]"
placeholder="请选择申报限重申报日期"
/>
range(start, end) {
const result = []
for (let i = start; i < end; i++) {
result.push(i)
}
return result
},
disabledDate(current) {
// 不能选当前时间以前的时间
return current && current < moment()
},
disabledDateTime() {
// 判断已选日期是否是今天,如果是今天,设置时分秒可选范围为当前的时间,否则都可选
const today = moment().format('YYYY-MM-DD')
let h = 0
let m = 0
let s = 0
// 判断已选时间是否为今天
if (this.currentDate && moment(this.currentDate.valueOf()).format('YYYY-MM-DD') === today) {
// 所选小时
const ch = moment(this.currentDate.valueOf()).hour()
// 所选分钟
const cm = moment(this.currentDate.valueOf()).minute()
// 今天的当前小时
h = moment().hour()
if (ch === h) {
m = moment().minute()
}
if (ch === h && cm === m) {
s = moment().second()
}
}
return {
disabledHours: () => this.range(0, h),
disabledMinutes: () => this.range(0, m),
disabledSeconds: () => this.range(0, s)
}
},
// 面板变更时记录下所选时间
handlePanelChange(value, mode) {
this.currentDate = value
},
// 时间发生变化时回调
handleDateChange (value, mode) {
this.currentDate = value
},