如何在datepicker上加时间限制呢?比如,只能选一个周的日期?
<template>
<div>
<Form>
<FormItem label="工作时段:" prop="taskTimeHorizons">
<Divider style="background:#fff;"></Divider>
<div class="date-item" v-for="(v,i) in taskForm.taskTimeHorizons" :key="i">
<DatePicker :editable="false" :options="timeOptions" v-model="v['startTime']" format="yyyy-MM-dd HH:mm" type="datetime" style="width: 47%"></DatePicker>
~
<DatePicker :options="timeOptions" v-model="v['endTime']" format="yyyy-MM-dd HH:mm" type="datetime" style="width: 47%"></DatePicker>
</div>
</FormItem>
</Form>
</div>
</template>
<script>
export default {
name: "testdatepicker",
data(){
var that = this;
return {
taskForm:{
taskTimeHorizons:[{startTime:'',endTime:''}],
},
timeOptions:{
disabledDate (date) {
let date1 = new Date(that.getDates()[0])
let date2 = new Date(that.getDates()[6])
return date && (date.valueOf() < date1.valueOf()- 86400000 || date.valueOf() > date2.valueOf());
}
}
}
},
methods:{
getDates() {
let new_Date = new Date()
let timesStamp = new_Date.getTime();
let currenDay = new_Date.getDay();
let dates = [];
for(let i = 0; i < 7; i++) {
dates.push(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)));
}
return dates
}
}
}
</script>
<style scoped>
</style>
网友评论