TimePicker in element disables part of the time (disabled to minutes)

TimePicker in element disables part of the time (disabled to minutes)

The project requirements are: select date and time, only select time after the current time, and disable the minimum level to minutes.

There are two options
1. Use DateTimePicker date time picker.
2. DatePicker and TimePicker combined use Here I use the second method, the most important attribute is picker-options

<el-date-picker
          v-model="formInline.inventoryDate"
          type="date"
          align="right"
          placeholder="Please select a date"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          @change="changeDate"
         ></el-date-picker>
         <el-time-picker
          v-model="formInline.inventoryDateTime"
          type="date"
          align="right"
          placeholder="Please select a time"
          :picker-options="{
           selectableRange: this.startTimeRange
          }"
          @change="changeTime"
          value-format="HH:mm:ss"
          format="HH:mm:ss"
         ></el-time-picker>
data(){
	return {
		pickerOptions: {
    disabledDate: time => {
     return time.getTime() < Date.now() - 3600 * 1000 * 24
    },
   },
	}
},
watch:
  'formInline.inventoryDate':{
   deep:true,
   handler(newValue, oldValue) {
    if(newValue){
     let nowDate = this.$options.filters['sendTimeDate'](new Date().getTime()+60*1000);// The time after one minute (I am due to business requirements, you can adjust the time here at will)
     let dt = nowDate.split(" ");
     let st = '';
     if(newValue.split(" ")[0] == dt[0]){
      // Today, the selected time starts from the current hour, minute, and second st = dt[1];
     }else{
      // Tomorrow and thereafter start at 0:00 st = '00:00:00';
     }
     this.startTimeRange = st + '- 23:59:59';
     //console.log(this.startTimeRange)
     //For example: If the time today is 10:41:40, then select the time range: 11:41:40 - 23:59:59
       //Otherwise: 00:00:00 - 23:59:59
    }
   },
  }
 },

Idea: Use the disabledDate configuration item in the picker-options attribute of el-date-picker to disable the date picker first, so that it can only select dates after the current date, and then use watch to monitor the date selected by the date picker. If it is today, use the selectableRange configuration item in the picker-options attribute of el-time-picker to control the selectable time.

Note: Although this logic can disable the selection of seconds, the selection of seconds is not disabled in the front-end page. When you select the previous seconds, the seconds after one minute will be displayed by default (I did it because of business requirements. You can adjust the disabled time period at will through the above code)

Rendering effect:

insert image description here

Let me summarize the first method. The date I disabled is before today, and the time range is from 22:00 to 02:00. I will directly post the code.

<el-date-picker
         class="dateClass"
         v-model="aa"
         type="datetime"
         :picker-options="pickerOptions"
         placeholder="After 22:00"
         style="width:100%">
        </el-date-picker>


 data() {
   return {
     aa: '',
     pickerOptions: {
      // Limit time selectableRange: ['22:00:00 - 23:59:59','00:00:00 - 02:00:00'], // You can also bind a variable here to dynamically limit the time // Limit date disabledDate: this.disabledDate
    },
   }
 } ,
 methods: {
  disabledDate(time) {
    return time.getTime() < Date.now() - 3600 * 1000 * 24
  }
}

This is the end of this article about disabling part of the time in the TimePicker time selector in element (disabling to minutes). For more information about disabling part of the time in the element TimePicker, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Solve the problem that the element DateTimePicker+vue pop-up box only displays hours
  • Element DateTimePicker date time selector usage example

<<:  How to sort a row or column in mysql

>>:  How to find slow SQL statements in MySQL

Recommend

Click the toggle button in Vue to enable the button and then disable it

The implementation method is divided into three s...

Basic security settings steps for centos7 server

Turn off ping scanning, although it doesn't h...

In-depth analysis of MySQL database transactions and locks

Table of contents 1. Basic Concepts ACID 3.AutoCo...

Detailed tutorial on installing Docker on CentOS 7.5

Introduction to Docker Docker is an open source c...

How to change the website accessed by http to https in nginx

Table of contents 1. Background 2. Prerequisites ...

Elementui exports data to xlsx and excel tables

Recently, I learned about the Vue project and cam...

Summary of some of my frequently used Linux commands

I worked in operations and maintenance for two ye...

Detailed explanation of the usage of image tags in HTML

In HTML, the <img> tag is used to define an...

MySQL intercepts the sql statement of the string function

1. left(name,4) intercepts the 4 characters on th...

Implementing a simple student information management system based on VUE

Table of contents 1. Main functions 2. Implementa...

jQuery manipulates cookies

Copy code The code is as follows: jQuery.cookie =...

How to view and clean up Docker container logs (tested and effective)

1. Problem The docker container logs caused the h...

Multiple ways to calculate age by birthday in MySQL

I didn't use MySQL very often before, and I w...

Understand the initial use of redux in react in one article

Redux is a data state management plug-in. When us...