iview时间DatePicker 开始时间小于结束时间

最新推荐文章于 2024-08-19 14:14:13 发布

*阿漓*

最新推荐文章于 2024-08-19 14:14:13 发布

阅读量143

点赞数

分类专栏：【前端】常用方法文章标签： view design javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44481113/article/details/131003158

版权

【前端】常用方法专栏收录该内容

37 篇文章 0 订阅

订阅专栏

该段代码展示了如何在Vue.js应用中使用DatePicker组件来限制用户选择的开始时间和结束时间。通过`disabledDate`方法，当开始时间被选后，结束时间不能早于开始时间；反之，当结束时间被选后，开始时间不能晚于结束时间。此外，未选择时，时间不能早于当前日期。

摘要由CSDN通过智能技术生成

 <DatePicker v-model="startTime" type="date" :options="options1" placeholder="选择开始时间" format="yyyy-MM-dd" style="width: 200px"  />
 <DatePicker v-model="endTime" type="date" :options="options2" format="yyyy-MM-dd"  placeholder="选择结束时间" style="width: 200px"  />

data() {
     const _this = this // 要定义 否则在disabledDate()中找不到
          return { 
              startTime: '', 
              endTime: "", 
              options1: {
                  disabledDate (date) {
                      if(_this.endTime){
                           var endDate = new Date(_this.endTime)     // 获取截止日期
                          return date.valueOf() > endDate    
                      }else{
                          return date.valueOf() > new Date();
                      }
                  }
              }, 
              options2: {
                  disabledDate (date) {
                      if(_this.startTime){
                          var startTime = new Date(_this.startTime)     // 获取截止日期
                         return date.valueOf() < startTime || date.valueOf() > new Date()
                     }else{
                         return date.valueOf() > new Date();
                     }
                  }
              },
          }
      },