VUE-日期选择器-结束时间>开始时间

女爷i 2023-08-17 17:46 137阅读 0赞

# 功能要求： #

限制结束时间选择范围，结束时间能够选择的起始日期，随着开始时间的选择而变化，也就是保证结束时间时钟>=开始时间。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5c3Rhcl85OQ_size_16_color_FFFFFF_t_70][]

# 代码片段：(其中最重要的就是startValue） #

methods: {
    
     //开始时间改变事件
        handleChange(date) {
          startValue = new Date(date).getTime();
          this.endDateOptions = {
            disabledDate(date) {
              return date && date.valueOf() < startValue - 86400000;
            }
          };
        }
    
    }

# 实现效果： #

开始日期选择了：2019-10-21

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5c3Rhcl85OQ_size_16_color_FFFFFF_t_70 1][]

结束时间，只能选择2019-10-21之后的日期

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5c3Rhcl85OQ_size_16_color_FFFFFF_t_70 2][]

# 总结： #

不将就，以前做过类似的功能，通常都是在点击确定按钮之后，再去判断结束时间不能小于开始时间，这样做很不友好。这次做这个功能问了好多人，他们给出的建议也是在单击确定之后判断。但是我感觉这是一个时间控件很常见的功能，虽然不知道Vue为什么没有给出明确的解决实例，但是肯定有解决办法，果然功夫不负有心人，特别感谢曹同学的帮助。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5c3Rhcl85OQ_size_16_color_FFFFFF_t_70]: /images/20230808/15ac713d74bb421a8064f2ec57b72ee7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5c3Rhcl85OQ_size_16_color_FFFFFF_t_70 1]: /images/20230808/f74ef16376814d2a82761cb0e14c986c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5c3Rhcl85OQ_size_16_color_FFFFFF_t_70 2]: /images/20230808/e186065e10a1425685a72a3441264421.png