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 split data in MySQL table and database

Table of contents 1. Vertical (longitudinal) slic...

Detailed explanation of the command mode in Javascript practice

Table of contents definition structure Examples C...

How to query and update the same table in MySQL database at the same time

In ordinary projects, I often encounter this prob...

The best solution for implementing digital plus and minus buttons with pure CSS

Preface: For the implementation of digital additi...

Details after setting the iframe's src to about:blank

After setting the iframe's src to 'about:b...

Detailed explanation of html-webpack-plugin usage

Recently, I used html-webapck-plugin plug-in for ...

How to detect whether a file is damaged using Apache Tika

Apache Tika is a library for file type detection ...

CSS to achieve Tik Tok subscription button animation effect

I was watching Tik Tok some time ago and thought ...

How to upload the jar package to nexus via the web page

When using Maven to manage projects, how to uploa...

W3C Tutorial (3): W3C HTML Activities

HTML is a hybrid language used for publishing on ...

8 examples of using killall command to terminate processes in Linux

The Linux command line provides many commands to ...

JavaScript to achieve lottery effect

This article shares the specific code of JavaScri...

Common problems in implementing the progress bar function of vue Nprogress

NProgress is the progress bar that appears at the...

Detailed explanation of the use of router-view components in Vue

When developing a Vue project, you often need to ...