1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 在vue中使用Ant Design日期 时间控件禁用之前日期时间

在vue中使用Ant Design日期 时间控件禁用之前日期时间

时间:2024-02-03 14:11:54

相关推荐

在vue中使用Ant Design日期 时间控件禁用之前日期时间

一、想要的效果

二、实现步骤

1、引入日期、时间组件代码

<a-date-picker @change="getSwitchData" :disabled-date="disabledDate" format="YYYY-MM-DD" :showToday="false" v-model="schedulerForm.schedule_createDate" /><a-time-picker :disabledHours="getDisabledHours" :disabledMinutes="getDisabledMinutes" format="HH:mm" v-model="schedulerForm.schedule_createTime" />

2、引入时间插件

import moment from ‘moment’

3、js函数

export default {data() {return {schedulerOldData: ''},methods: {// 1、首先获取选择的日期getSwitchData(date, dateString) {this.schedulerOldData = dateString},// 2、禁用日期disabledDate(current) {return current && current < moment().subtract(1, 'day')},// 3、禁用小时getDisabledHours() {var hours = []let isAfter = moment(this.schedulerOldData).isAfter(moment())if (!isAfter) {for (var i = 0; i < moment().hour(); i++) {hours.push(i)}} else {hours = []}return hours},// 4、禁用分钟getDisabledMinutes(selectedHour) {var Minutes = []let isAfter = moment(this.schedulerOldData).isAfter(moment())let isMinutesAfter = moment().hours() < selectedHourif (!isAfter && !isMinutesAfter) {for (var i = 0; i < moment().minutes(); i++) {Minutes.push(i)}} else {Minutes = []}return Minutes},}}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。