iview日期时间选择器---控制时间在一个月内

最新推荐文章于 2024-03-19 10:10:44 发布

zshmilyj

最新推荐文章于 2024-03-19 10:10:44 发布

阅读量765

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_60652380/article/details/125080142

版权

控制时间在一个月内日期默认只显示七天

<FormItem label="提交时间" :label-width="68" class="fromtime">
          <FormItem prop="startsubmitTime" style="width: 152px">
            <Date-picker
              v-model="form.startsubmitTime"
              :editable="false"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              :clearable="false"
              @on-change="handleSubmitTimeStart"
              :options="submitTimeStartOptions"
            />
          </FormItem>
          <span style="margin-right: 4px">—</span>
          <FormItem prop="endsubmitTime" style="width: 152px">
            <Date-picker
              v-model="form.endsubmitTime"
              :editable="false"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              :clearable="false"
              @on-change="handleSubmitTimeEnd"
              :options="submitTimeEndOptions"
            />
          </FormItem>
</FormItem>

methods:{
    handleSubmitTimeStart(value) {
      this.form.startsubmitTime = value;
    },
    handleSubmitTimeEnd(value) {
      let dateArr = value.split(" ");

      if (dateArr[1] === "00:00:00") dateArr[1] = "23:59:59";

      this.form.endsubmitTime = dateArr.join(" ");
    },
}

data(){

 submitTimeStartOptions: {
        disabledDate: (date) => {
          // 大于当天时间
          return (
            date.valueOf() > getEndOf().valueOf() ||
            // 小于结束时间三个月
            date.valueOf() <
              Day(this.form.endsubmitTime)
                .subtract(1, "month")
                .startOf("day")
                .valueOf() ||
            // 大于结束时间
            date.valueOf() > Day(this.form.endsubmitTime).valueOf()
          );
        },
      },
      submitTimeEndOptions: {
        disabledDate: (date) => {
          // 大于当天时间
          return (
            date.valueOf() < Day(this.form.startsubmitTime).valueOf() ||
            date.valueOf() >
              Day(this.form.startsubmitTime)
                .add(1, "month")
                .startOf("day")
                .valueOf() ||
            date.valueOf() > getEndOf().valueOf()
          );
        },
      },
}