100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Ant Design Vue DatePicker 日期选择框 限制可选时间

Ant Design Vue DatePicker 日期选择框 限制可选时间

时间:2023-06-23 19:47:52

相关推荐

Ant Design Vue DatePicker 日期选择框 限制可选时间

背景

发送时间需要限制在当前时间分钟之后,比如:当前时间是6月7日12:00,那么时间选择器可选的时间是:在6月7日12:00 之后的。

实现

<a-date-pickershow-time="{ format: 'HH:mm' }"format="YYYY-MM-DD HH:mm":show-today="false":disabled-date="disabledDate":disabled-time="disabledTime"/>disabledDate(current) {return current && current < moment().startOf('day');},disabledHours() {const hours = [];for (let i = 0; i < moment().hour(); i++) {hours.push(i);}return hours;},disabledMinutes(currentDate) {const currentMinute = moment().minute();const currentHour = moment(currentDate).hour();const minutes = [];if (currentHour === moment().hour()) {for (let i = 0; i < currentMinute; i++) {minutes.push(i);}}return minutes;},disabledTime(dateTime) {if (moment(dateTime).isBefore(moment(), 'day')) {return {disabledHours: () => [],disabledMinutes: () => [],};}if (moment(dateTime).isSame(moment(), 'day')) {return {disabledHours: () => this.disabledHours(dateTime),disabledMinutes: () => this.disabledMinutes(dateTime),};}return null;},

被大当家教育后:

//disabledHours() {//const hours = [];//for (let i = 0; i < moment().hour(); i++) {//hours.push(i);//}//return hours;//},//disabledMinutes(currentDate) {//const currentMinute = moment().minute();//const currentHour = moment(currentDate).hour();//const minutes = [];//if (currentHour === moment().hour()) {//for (let i = 0; i < currentMinute; i++) {//minutes.push(i);//}//}//return minutes;//},disabledDate(current) {return current && current < moment().startOf('day');},disabledTime(dateTime) {return {disabledHours: () => {if (moment().isSame(dateTime, 'days')) {return _.times(moment().hour());}return [];},disabledMinutes: () => {if (moment().isSame(dateTime, 'hours')) {return _.times(moment().minute());}return [];},};},

样式展示:(-6-19 15:46)

moment.js

lodash.js

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