首页 > 其他 > 详细

VUE:使Element-UI中DatePicker的终止日期不超过起始日期

时间:2021-06-23 21:06:40      阅读:57      评论:0      收藏:0      [点我收藏+]

Template

// 起始DatePicker
<el-form-item prop="name" label="起始年月">
  <el-date-picker 
    :picker-options="lPickerOptions" 
    @change="lPickerChange" />
</el-form-item>
// 截止DatePicker
<el-form-item prop="name" label="截止年月">
  <el-date-picker 
    :picker-options="lPickerOptions" />
</el-form-item>

Data

data: function () {
    return {
        // 储存起始日期变化
        lPickerData: 0,
        // 起始日期禁用项
        lPickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
        },
        // 截止日期禁用项
        rPickerOptions: {
            disabledDate(time) {
                // 这里禁用条件使用“||”而不是“&&”
                return time.getTime() < this.lPickerData || time.getTime() > Date.now();
            },
        },
    }
}

Methods

// 监听起始日期改变
lPickerChange: function(e) {
  // 这里减去 1 day = 86400000 ms, 为了避免选择起始时间后,截止时间不能选择同一天内的情况。 this.lPickerData = new Date(e).getTime() - 86400000 },

 

* 饿了么DatePicker提供的监听到的参数是  2021-06-23  这样的格式,因此这里用到  new Date( )  将数据变更为  Wed Jun 23 2021 17:45:56 GMT+0800 (中国标准时间)  ,然后再使用  getTime( )  方法将数据转化成时间戳(ms级),就可以与 pickerOption disableDate 返回的 time.getTime( ) 进行比较了

- END -

VUE:使Element-UI中DatePicker的终止日期不超过起始日期

原文:https://www.cnblogs.com/97z4moon/p/14923811.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!