element-ui：date-picker的自定义使用

最新推荐文章于 2024-03-07 18:29:35 发布

原创最新推荐文章于 2024-03-07 18:29:35 发布 · 2.7k 阅读

本内容遵循CC 4.0 BY-SA版权协议

这篇博客介绍了如何在vue.js项目中使用element-ui的date-picker组件，并实现了两个功能：1) 用户可自由选择开始时间；2) 结束时间不能早于开始时间，超出限制时会触发弹窗提示。通过绑定数据、设置限制条件和监听时间选择来完成这一功能。

实现功能：

1、点击开始时间，弹出提示框进行提醒，无需禁用时间功能，用户可以自由选择

2、结束时间不得小于开始时间，对结束时间进行限制

效果如图：

开始时间选择器：结束时间23号，23后面的数值不可选，选择当天日期，不弹窗，选择小于当天日期，出现弹窗

当天日期是9-1日，我选择了8-31日，进行弹窗提示

结束时间选择器

以下是部分代码：仅供个人备用

vue：html

<el-form-item   label="广告限制：" class="item-wd">
      //开始时间
     <el-date-picker style="width:140px" v-model="form.startDate" format="yyyy-MM-dd "                 
       value-format="yyyy-MM-dd" type="date"  placeholder="开始时间" :picker- 
       options="startTime"/>
     <span style="padding:0 6px">至</span>
      //结束时间
     <el-date-picker style="width:140px" v-model="form.endDate" format="yyyy-MM-dd  " 
       value-format="yyyy-MM-dd"  type="date"  placeholder="结束时间" :picker- 
       options="endTime"/>
</el-form-item>

绑定数据：

form: {
      startDate: '',  //广告限制开始
      endDate: '',     //广告限制结束
}

接下来在data中进行开始时间和结束时间的限制

startTime: {// 时间判断
            disabledDate: time => {
                let endDateVal = this.form.endDate;
                let now = time.getTime()
                if (endDateVal) {  return time.getTime() > new Date(endDateVal).getTime()}
            }
        },
endTime: {
            disabledDate: time => {
                let beginDateVal = this.form.startDate;
                if (beginDateVal) { return time.getTime() < new                 
       Date(beginDateVal).getTime()}
            }
        },

接下来在监听中设置一个判断选择时间是否小于当前时间的方法

watch: {
        'form.startDate': function(newVal) {
            //先择时间
            var time1 = Date.parse(newVal)
            //当前时间
            var nowDate = new Date();
            //当前时间减去1天
            var aimDate = new Date(nowDate.setDate(nowDate.getDate()-1));
            console.log('选择时间=>',time1);
            console.log('当前时间=>',aimDate);
            if (newVal !== '' && time1 < aimDate) {
                this.timeVisible = true
            }
        },
    },

以上，有任何问题欢迎随时交流

标签

#vue.js #html5 #javascript