600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > Ant Design Vue日期选择器 禁止选择当前之前的时间

Ant Design Vue日期选择器 禁止选择当前之前的时间

时间:2019-12-11 14:03:55

相关推荐

Ant Design Vue日期选择器 禁止选择当前之前的时间

a-date-picker时间选择器

Ant Desugn Vue的时间选择器,也遇到了一些问题,就想记录一下,自认为水平不是很高,欢迎批评指正

//标签<a-date-picker:showToday="false":allowClear="false"@change="setTime"@openChange="openChange":value="Survey.endTime"format="YYYY-MM-DD HH:mm:ss":disabledDate="disabledDate":disabledTime="disabledDateTime":showTime="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"/>

data() {return {Survey: {},//存放截止时间disabledTime: {hour: '',//存放被ban掉的时minute: ''//存放被ban掉的分}}},

methods: {OpenModel(record) {this.Survey = {...record, endTime: moment(record.endTime) }//上从别的地方传过来的默认值},setTime(data, datastring) {//若有清除按钮需要加入判断this.resEndtimeDis()this.Survey = {...this.Survey, endTime: data }let time = data.format('YYYY/MM/DD HH mm').split(' ')//切割存放的年月日,时,分var date = new Date()//获取当前时间if (moment(time[0]).valueOf() == moment(date.toLocaleDateString()).valueOf()) {//年月日相同增加限制条件this.disabledTime.hour = date.getHours()//ban掉 时if (date.getHours() < time[1]) {//判断选择的是否与当前时间是同一小时,如果不是则不限制分钟this.disabledTime.minute = ''//解除分的禁止} else {this.disabledTime.minute = date.getMinutes()//ban掉 分}} else {//日期不同解除所有限制条件this.resEndtimeDis()}},openChange(status) {if(status){this.setTime(this.Survey.endTime,'')}//上保险,当选择到了不可选择的时间将会默认选中当日0点if (new Date(this.Survey.endTime) <= new Date()) {this.Survey.endTime = moment(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1))}},range(start, end) {const result = []for (let i = start; i < end; i++) {result.push(i)}return result},disabledDate(current) {return current < moment().subtract(0, 'day')//今天之前的年月日不可选,不包括今天},disabledDateTime() {return {disabledHours: () => this.range(0, 24).splice(0, this.disabledTime.hour),//ban小时disabledMinutes: () => this.range(0, this.disabledTime.minute)//ban分}},resEndtimeDis() {//解除限制this.disabledTime = {hour: '',minute: ''}}}

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