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: ''}}}