element-ui 日期选择器自定义范围

最新推荐文章于 2024-07-12 10:39:00 发布

Mr.XiaoYang

最新推荐文章于 2024-07-12 10:39:00 发布

阅读量4.8k

点赞数 1

分类专栏： vue 进阶之旅文章标签： element日期选择器 vue日期选择器

本文链接：https://blog.csdn.net/qq_36718999/article/details/94736627

版权

vue 进阶之旅专栏收录该内容

9 篇文章 0 订阅

订阅专栏

查看更多资源

1. 案例简介：

vue项目中，使用element-ui日期月份选择器，实现功能：(1) 默认显示期间为近半年；(2) 开始日期月份为2018年12月，以往月份不可选择；(3) 结束日期月份大于开始日期月份，并截止当前月份，未来月份不可选择。

2. 案例图示：

3. 案例代码：

<el-row>
   <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
      <el-form-item label="工资月份查询" prop="endPeriod">
         <el-date-picker
            v-model="searchForm.startPeriod"
            type="month"
            format='yyyyMM'
            value-format='timestamp'
            :picker-options="pickerOptionsStart"
            placeholder="开始月份">
          </el-date-picker>
          <span>—</span>
          <el-date-picker
            v-model="searchForm.endPeriod"
            type="month"
            format='yyyyMM'
            value-format='timestamp'
            :picker-options="pickerOptionsEnd"
            placeholder="结束月份">
          </el-date-picker>
     </el-form-item>
  </el-col>
</el-row>

export default {
    data() {
        return {
          searchForm:{
            'startPeriod':new Date().getTime()-365*24*3600*1000/2,//近半年
            'endPeriod':new Date().getTime(),// 当前月
          },
          pickerOptionsStart:{ // 限定 选择开始日期
              disabledDate: (time) => {
                let date2018 = new Date('2018/11/31 23:59:59').getTime(); 
                return !(date2018 < time.getTime() && time.getTime() < Date.now());
              }
          },
          pickerOptionsEnd: { // 限定 选择结束日期
              disabledDate: (time) => {
                return !( this.searchForm.startPeriod < time.getTime() && time.getTime() < Date.now());
              }
          },
       }
    }
}

4. 案例图示：

5. 案例代码：

<el-form-item label="上传时间"
              prop="addDate">
  <el-date-picker v-model="searchForm.addDate"
                  type="daterange"
                  format='yyyy-MM-dd'
                  value-format='timestamp'
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']">
  </el-date-picker>
</el-form-item>

export default {
  data () {
    return {
      searchForm: {
        addDate: [],
      },
      params：{
        createTimeStart：'',
        createTimeEnd :''
      }
    }
  },
  watch:{
    'searchForm.addDate' (nval, oval) { // 监听数据变化 将时间戳 转换为 日期格式
      if (nval && nval.length > 0) {
        console.log(nval)
        this.params.createTimeStart =this.timeStampToDate(nval[0]);
        this.params.createTimeEnd = this.timeStampToDate(nval[1]);
      } else {
        this.params.data.createTimeStart = '';
        this.params.data.createTimeEnd = '';
      }
    }
  },
  mounted () {
    this.getDate30(); // 初始化数据
  },
  methods: {
    getDate30 () {
      let nowDate = new Date().getTime();
      let oldDate = nowDate - 30 * 24 * 60 * 60 * 1000; // 近30天
      this.searchForm.addDate = [oldDate, nowDate];
    },
    timeStampToDate(shijianchuo){ // 将时间戳 转换为 日期格式
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + 
      add0(s);

    }
  },

}