美文网首页
el-date-picker禁用指定日期之前或之后的日期

el-date-picker禁用指定日期之前或之后的日期

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-05-15 11:03 被阅读0次

    一、elementUI中el-date-picker禁用指定日期之前或之后的日期

    通过配置picker-options配置指定禁用日期(pickerOptions写到data里面)

    <el-date-picker
       v-model="date"
       type="date"
       size="small"
       value-format="yyyy-MM-dd"
       format="yyyy-MM-dd"
       :placeholder="'选择日期'"
       :picker-options="pickerOptions"
    ></el-date-picker>
    

    1.今天之前的日期禁止选择

    pickerOptions: {
       disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
       }
    }
    

    2.不能选择今日之后的日期(今天可选)

    pickerOptions: {
       disabledDate(time) {
          return time.getTime() > Date.now();
       }
    }
    

    解析:

    (1)Date.now()获取当前时间(表示自 UNIX 纪元开始(1970 年 1 月 1 日 00:00:00 (UTC))到当前时间的毫秒数)

    (2)- 8.64e7 表示可选择当天时间(注:小于当前时间,- 8.64e7 则是禁用日期不包含当前日,若大于当前日期, 8.64e7 则是禁用日期包含当前日)

    time.getTime() < Date.now() - 8.64e7  禁用日期不包含当前日
    
    time.getTime() > Date.now() - 8.64e7  禁用日期包含当前日
    

    (3)time.getTime() < Date.now() - 8.64e7 代表只能选择今天之后的时间【包含今天】(8.64e7:科学计数法,代表8.64×10的7次方)

    3.禁用指定日期,如禁用大于2023-04-05日期,包括当天也不可选

    pickerOptions: {
       disabledDate(time) {
          return time.getTime() > new Date("2023-04-05").getTime() - 8.64e7;
       }
    }
    

    相关文章

      网友评论

          本文标题:el-date-picker禁用指定日期之前或之后的日期

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