Ant Design Vue日期选择器,禁止选择当前之前的时间
a-date-picker时间选择器Ant Desugn Vue的时间选择器,实习也有一段时间了,也遇到了一些问题,就想记录一下,自认为水平不是很高,欢迎批评指正//标签<a-date-picker:showToday="false":allowClear="false"@change="setTime"@openChange="openChange":value="Survey.endTi
·
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: ''
}
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)