zoukankan      html  css  js  c++  java
  • element ui 日期选择(开始到结束一个月限制)

     开始时间—结束时间

    <FormItem label="统计时间" prop="startDate" label-position="left" :label-width="78">
              <DatePicker
                transfer
                :editable="false"
                style="170px"
                type="date"
                placement="bottom-end"
                v-model="formItem.startDate"
                placeholder="请选择开始时间"
                :options="startDateOption"
                :clearable="false"
                @on-change="(startdate,type)=>onStartDateChange(startdate,type,'formItem')"
              ></DatePicker>到
            </FormItem>
            <FormItem prop="endDate">
              <DatePicker
                transfer
                :editable="false"
                style="170px"
                type="date"
                placement="bottom-end"
                v-model="formItem.endDate"
                placeholder="请选择结束时间"
                :clearable="false"
                :options="renderEndDateOption('formItem')"
              ></DatePicker>
            </FormItem>
    

    开始时间选择器

     startDateOption: {
            disabledDate (date) {
              return date && date.valueOf() > Date.now();
            }
          },
    

      

    开始时间的change事件

      onStartDateChange (startDate, type, formitem) {
          let dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
          if (
            this[formitem].endDate < new Date(startDate + " 00:00:00") ||
            Math.floor(
              (this[formitem].endDate.getTime() -
                new Date(startDate + " 00:00:00").getTime()) /
              dateTime
            ) > 30
          ) {
            this[formitem].endDate = "";
          }
        },
    

      

    结束时间选择器

    renderEndDateOption (formitem) {
          let dateTime = 1000 * 60 * 60 * 24;
          return {
            disabledDate: date => {
              return (
                date &&
                (date.valueOf() > Date.now() ||
                  date < this[formitem].startDate ||
                  Math.floor(
                    (date.getTime() -
                      new Date(
                        formatDate("yyyy-MM-dd", this[formitem].startDate) +
                        " 00:00:00"
                      ).getTime()) /
                    dateTime
                  ) > 30)
              );
            }
          };
        },
    

     默认当前一周的数据

      formItem: {
            startDate: new Date(new Date().getTime() - 3600 * 1000 * 24 * 6),
            endDate: new Date(),
            provinceNo: "",
            regionNo: ""
          },
    

      

  • 相关阅读:
    liunx某台服务器无法访问其他服务器!!!!!!!!
    下载历史版本CentOS
    通过sparkstreaming分析url的数据
    Linux查看空间大小的命令
    secureCRT背景颜色
    布谷鸟算法详细讲解
    matlab 绘图
    浏览器内存泄露问题
    C#和java的语法区别
    i-m-a-g-e-7
  • 原文地址:https://www.cnblogs.com/qdwz/p/12658338.html
Copyright © 2011-2022 走看看