2020-11-17

【iview组件DatePicker 日期选择器只能选当前天及未来七天（一周）的日期】

标签

 
<template>
   
    <DatePicker type="date"
   				:editable="false" //文本框不可以输入
                placeholder="Select date"//input框内显示的内容
                :options="options3" //设置不可选日期
                format="yyyy-MM-dd" //展示的日期格式
                style="width: 250px"//input框样式
                ></DatePicker>
 
</template>
<script>
    export default {
        data(){
          return {
          //设置属性 options 对象中的 disabledDate 可以设置不可选择的日期。
            options3: {
                disabledDate(date) {
                //disabledDate 是函数，参数为当前的日期，需要返回 Boolean 是否禁用这天。
                    return (date && date.valueOf() < Date.now() - 86400000) || date.valueOf() > Date.now() + 604800000
                    //根据当前时间计算需要的天数转换为时间戳
                    
                }
            }
</script>

根据自己项目的需求可以相对当前时间和时间戳来来计算需要禁用的时间，愿我的功能效果能给你一点小思路！