Vue el-date-picker dynamic limit time range case detailed explanation

Vue el-date-picker dynamic limit time range case detailed explanation

There are two situations

1. Start time and end time are in the same box (limited to this month only)

2. Separate the start time and end time into two boxes (limit the start time to not be earlier than the current time and the end time to not exceed one week from the start time)

Case 1

//Case 1 Original Copyright Statement: This article is an original article by weixin_40998880 and complies with the CC 4.0 BY-SA Copyright Agreement. Please attach the original source link and this statement when reprinting.
//Link to this article: https://blog.csdn.net/weixin_40998880/article/details/106272897
 
//html
<el-date-picker
   v-model="time"
   type="datetimerange"
   @change="datePickerChange"
   :picker-options="pickerOptions"
   range-separator="-"
   start-placeholder="start date"
   end-placeholder="end date"
   align="right"
   style="width:100%;"
   value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
   :default-time="['00:00:00','23:59:59']">
</el-date-picker>
 
 
//script
 
data(){
  return {
     selectData: '',
     pickerOptions: {
      // When clicked, the start time is selected, which is minDate
      onPick: ({ maxDate, minDate }) => {
         this.selectData = minDate.getTime()
         if (maxDate) {
           // Remove restrictions this.selectData = ''
         }
      },
      disabledDate: (time) => {
          // Whether to limit the judgment condition if (!this.isNull(this.selectData)) {
            var date = new Date(this.selectData)
            // Here are the restriction conditions. Dates greater than or less than this month are disabled (try not to use this method, because this month of other years can also be selected. For specific restriction dates, refer to situation 2)
            return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
          } else {
            return false
          }
        }
     }
  }
},
methods:{
  // Check if it is empty isNull(value) {
    if (value) {
      return false
    }
    return true
  }
}
 

Case 2

//Situation 2
//html
    <el-col :span="8">
                <el-form-item prop="beginTime" label="Appointment start time:">
                  <el-date-picker
                    v-model="editForm.beginTime"
                    type="datetime"
                    placeholder="Select a start time"
                    :picker-options="pickerOptions[0]"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="defaultTime[0]"
                  >
                  </el-date-picker> </el-form-item
              ></el-col>
              <el-col :span="8"
                <el-form-item prop="endTime" label="Appointment end time:">
                  <el-date-picker
                    v-model="editForm.endTime"
                    type="datetime"
                    placeholder="Select a start time"
                    :picker-options="pickerOptions[1]"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="defaultTime[1]"
                  >
                  </el-date-picker> </el-form-item
              ></el-col>
              
              
 //script
    data(){
  return {
     selectData: '',
     defaultTime: [],
     pickerOptions: [
        {
          disabledDate: time => {
            const curDate = new Date().getTime();
            const day = 14 * 24 * 3600 * 1000;
            const dateRegion = curDate + day;
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > dateRegion
            );
          }
        },
        {
          //Restrict the end time to one week after the start time disabledDate: time => {
            // Whether to limit the judgment condition const date = new Date(this.editForm.beginTime);
            if (!this.isNull(date)) {
              const day = 7 * 24 * 3600 * 1000;
              const dateRegion = date.getTime() + day;
              return (
                //Disable dates that are less than the start time and one week after the start time new Date(time).getTime() > dateRegion ||
                new Date(time).getTime() < date.getTime()
              );
            } else {
              return false;
            }
          }
        }
      ],
  }
},
methods:{
  // Check if it is empty isNull(value) {
    if (value) {
      return false
    }
    return true
  },
  //Get the current time and add the default value when selected getNowTime() {
      let d = new Date();
      let year, month, day, hour, minute;
      //Ten minutes after the current time d.setTime(d.getTime() + 10 * 60 * 1000);
      [year, month, day, hour, minute] = [
        d.getFullYear(),
        d.getMonth(),
        d.getDate(),
        d.getHours(),
        d.getMinutes()
      ];
      let hour2 = hour + 1;
      //The default value when the start time is selected is ten minutes after the current time //The default value when the end time is selected is one hour and ten minutes after the current time this.defaultTime = [
        hour + ":" + minute + ":00",
        hour2 + ":" + minute + ":00"
      ];
    },
}

This is the end of this article about the detailed case of vue el-date-picker dynamically limiting the time range. For more relevant vue el-date-picker dynamically limiting the time range content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue filter perfect time and date format code
  • Common time format conversion in Vue
  • Several ways of vue time conversion
  • Vue implements start time and end time range query
  • Vue prevents multiple triggering requests after continuous clicks in a short period of time
  • Vue timeline vue-light-timeline usage instructions
  • ant-design-vue time selector assigns default time operation
  • Instructions for using the date selection box mixed with the time selector in ant design vue
  • Vue formats the time in the element table to the specified format

<<:  Detailed introduction to Mysql date query

>>:  Analysis of multi-threaded programming examples under Linux

Recommend

How to write configuration files and use MyBatis simply

How to write configuration files and use MyBatis ...

MySQL string splitting example (string extraction without separator)

String extraction without delimiters Question Req...

In-depth understanding of JavaScript callback functions

Table of contents Preface Quick Review: JavaScrip...

How to count down the date using bash

Need to know how many days there are before an im...

How to deploy Angular project using Docker

There are two ways to deploy Angular projects wit...

Detailed explanation of data sharing between Vue components

Table of contents 1. In project development, the ...

Web design reference firefox default style

Although W3C has established some standards for HT...

Detailed explanation of the mysql database LIKE operator in python

The LIKE operator is used in the WHERE clause to ...

JavaScript to achieve full or reverse selection effect in form

This article shares the specific code of JavaScri...

Introduction and analysis of three Binlog formats in MySQL

one. Mysql Binlog format introduction Mysql binlo...

Display ellipsis effect when table cell content exceeds (implementation code)

illustrate In front-end development, you often en...

How to reduce the root directory of XFS partition format in Linux

Table of contents Preface System environment Curr...