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: ""
          },
    

      

  • 相关阅读:
    查看java程序中对象占用空间大小
    elasticsearch的基本了解
    kafka命令及启动
    屠龙之路_大杀技之倚天屠龙_TenthDay
    屠龙之路_坚持就是胜利_NinthDay
    屠龙之路_狭路相逢勇者胜_EighthDay
    屠龙之路_任生活如何虐你,屠龙之路还得继续_SeventhDay
    屠龙之路_假期罢工和公主私奔_SixthDay
    屠龙之路_击败DB小boss_FifthDay
    屠龙之路_转角遇到服务器大魔王_FourthDay
  • 原文地址:https://www.cnblogs.com/qdwz/p/12658338.html
Copyright © 2011-2022 走看看