美文网首页web前端
iview的DatePicker增加时间限制

iview的DatePicker增加时间限制

作者: 姜治宇 | 来源:发表于2020-05-25 14:22 被阅读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>
    

    相关文章

      网友评论

        本文标题:iview的DatePicker增加时间限制

        本文链接:https://www.haomeiwen.com/subject/jijyahtx.html