VUE-Element组件（10）el-date-picker

最新推荐文章于 2025-02-25 15:00:45 发布

w_t_y_y

最新推荐文章于 2025-02-25 15:00:45 发布

阅读量1.9k

点赞数

分类专栏： # VUE页面开发文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/w_t_y_y/article/details/122090623

版权

VUE页面开发专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了Element UI中El-DatePicker组件的使用方法，包括如何设置日期格式、初始化日期、限制日期选择范围及进行日期有效性验证等关键操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、绑定值为字符串类型：

<el-date-picker
            placeholder="考试开始时间"
            align="center"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            class="long"
            v-model="startTime"
            placement="bottom-start"
            type="date"
            :editable="false"
            style="width:100%"
            size="mini"
            @change="refreshMap"
          ></el-date-picker>

初始化：

this.startTime = "2021-12-21"

2、绑定值类型为Date：

<el-date-picker
                v-model="searchData.startDate"
                type="date"
                placeholder="开始日期"
                style="width:100%"
                size="mini"
              >
              </el-date-picker>

初始化为昨天：

created() {
    this.searchData.startDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000).format('yyyy-MM-dd');
    this.searchData.endDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000).format('yyyy-MM-dd');
    this.loadData();
  },

时间校验

 isDateValid() {
      if (!this.searchData.startDate || !this.searchData.endDate) {
        this.$Message.error('时间为必填');
        return false;
      }
      this.searchData.startDate = new Date(Date.parse(this.searchData.startDate));
      this.searchData.endDate = new Date(Date.parse(this.searchData.endDate));
      if (this.searchData.startDate.getTime() > this.searchData.endDate.getTime()) {
        this.$Message.error('开始时间不可以大于结束时间');
        return false;
      }
      let time = this.searchData.endDate.getTime() - this.searchData.startDate.getTime();
      let day = time / (1000 * 60 * 60 * 24);
      console.info('时间差' + day);
      if (day > 7) {
        this.$Message.error('时间范围不可以超过7天');
        return false;
      }
      this.searchData.startDate.setHours(0, 0, 0, 0);
      this.searchData.endDate.setHours(0, 0, 0, 0);
      return true;
    },

注意最后.setHours(0, 0, 0, 0)是因为发现初始化的日期默认为早上8点。