web前端

iview的DatePicker增加时间限制

2020-05-25  本文已影响0人  姜治宇

如何在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>
上一篇 下一篇

猜你喜欢

热点阅读