广告位联系
返回顶部
分享到

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

html5 来源:互联网 作者:佚名 发布时间:2023-11-12 21:13:00 人浏览
摘要

一、elementUI中el-date-picker禁用指定日期之前或之后的日期 通过配置picker-options配置指定禁用日期(pickerOptions写到data里面) 1 2 3 4 5 6 7 8 9 el-date-picker v-model=date type=date size=small value-format

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

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

1

2

3

4

5

6

7

8

9

<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.今天之前的日期禁止选择 

1

2

3

4

5

pickerOptions: {

   disabledDate(time) {

      return time.getTime() < Date.now() - 8.64e7;

   }

}

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

1

2

3

4

5

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日期,包括当天也不可选

1

2

3

4

5

pickerOptions: {

   disabledDate(time) {

      return time.getTime() > this.specifyDate - 8.64e7;

   }

}

解析:this.specifyDate是指定日期,- 8.64e7 表示可选择当天日期,

例如:return time.getTime() > new Date("2023-04-05").getTime() - 8.64e7;

附加:h5写法

1

2

3

4

5

6

<input

   type="date"

   placeholder="请选择日期"

   id="finishTime"

   name="finishTime"

>

设置禁止选择小于今天的日期,通过min设置【max禁止选择大于今天的日期】

1

2

3

4

5

const date_now = new Date();

const year = date_now.getFullYear();

const month = date_now.getMonth()+1 < 10 ? "0" + (date_now.getMonth() + 1) : (date_now.getMonth() + 1);

const date = date_now.getDate() < 10 ? "0" + date_now.getDate() : date_now.getDate();

$("#finishTime").attr("min", year + "-" + month + "-" + date);


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计