Element-UI hungry yet time component controls week by month date, start time, end time parameter range limit

In the daily development, we will encounter some cases, the use of Element-UI  selection control limits the user's date and time range (example: query messages start and end time, you need to select the time limit can not be after today).

 

Read some documents online, piecemeal, are a variety of simple bar codes listed, and no detailed description of the meaning of each parameter, use, novice and unfriendly.

We used here is DatePicker Date Picker:  Element official website of the date control address , date usage restrictions for novice time limit may not understand the way to write rules. Next we will set the parameters detailed interpretation blackout dates. A full range of thorough understanding of how to limit the time and date of the control.

 

Official documents date restrictions Description:

 

Look here hungry it's official documents, written here is very simple, use  disabledDate  parameter to limit,  disabledDate is a function that has a parameter within the function, the following is simple pseudo-code examples

// the HTML first selector plus date: picker-options attribute 
// example:
 
<date-EL- Picker 
    V -model = "endDate"  
    : Picker -options = "disabledDate" 
> 
</ EL-DATE-Picker> / / Vue in which data written to the relevant parameters 
 disabledDate: (time) => { return time.getTime () < new new a Date () the getTime (). // each time the current parameter here, time selector silent representatives time, the time for determining whether or not these optional. 　　@ by return time> certain time or return time <certain time limit to the selected time range. 　　// remember the time required .getTime () is converted to milliseconds. 
})




    

　　

 

The above is a simple example, we believe that the students after careful reading, now must have understood that the method of time constraints, very simple fact, by setting  disabledDate parameter of Time,   return a greater than or less than the formula, use to set the date range.

 

 

Next, we use two detailed case to more clearly interpret what the column, use the date controls,

Two dates linkage control ( limit start and end times for the last month )

In fact, the idea is very simple, start time displays the current time to the maximum, the end time to get the data through the beginning of time, the maximum limit for the start time or the current time can be; the following detailed interpretation of the code;

 

Tip: parameters needed to control date is "2020-12-31" format, but restricts a function of time in use "<", ">", "> =", "<=" , the comparison method is needed use .getTime () is converted into milliseconds, otherwise, "2020-12-31" this format is not contrast oh

 

// HTML 代码

<el-date-picker
   v-model="value1"
   placeholder="开始时间"
   :picker-options="start">
</el-date-picker>
<el-date-picker
   v-model="value2"
   placeholder="结束时间"
   :picker-options="end">
</el-date-picker>// Vue 中 data 中代码
    value1: '2020-12-31',
    value2: '2020-12-31',
    start: {
       disabledDate: (time) =>@
         const Space = 30 * 24 * 3600 * 1000here 30 days the number of milliseconds//{
         




         Set the minimum number of milliseconds of time, the current time minus 30 days the number of milliseconds 
         const minTime = new new a Date () getTime () -. Space
          // set the maximum number of milliseconds the current time plus the number of milliseconds day today 
         const maxTime = new new a Date ( new new a Date ( new new a Date () The toLocaleDateString ()) the getTime () + 24 * 60 * 60 * 1000 -... 1 )
          // return a formula for the maximum current time, a minimum of 30 days before 
         return time.getTime () < || time.getTime minTime ()> maxTime 
       } 
    }, 
    End: { 
      disabledDate: (time) => {
         // here 30 days the number of milliseconds 
        const Space = 30 * 24 * 3600 * 1000 //
        Get date time 
        const the startTime = VALUE1
         // set the current selection time 
        const startTimes the startTime = || new new a Date () the getTime () -. Space
         // set the minimum selection time, the time required to manually dateRange current method to obtain the current time, below the code has to show the way to get the current time 
        const minTime = (startTimes === dateRange)? new new a Date (startTimes) .getTime (): new new a Date (startTimes) .getTime () - (1 * 24-* 3600 * 1000 )
         / / set the maximum time to choose today 
        const maxTime = new new a Date ( new new a Date ( new new a Date () toLocaleDateString ()) getTime () + 24-* 60 * 60 * 1000 -.. 1 )
         //Here is today still choose to return a formula biggest box or start time, a minimum of 30 days before the 
        return time.getTime () <minTime || time.getTime ()> maxTime 
      } 
    }, 


// get the current time of writing function 

 var dd = new new a date () 
 dd.setDate (dd.getDate () + ADDDATE) // Get ADDDATE days after the date of 
 var Y = dd.getFullYear ()
  var m = dd.getMonth () +. 1 <10? '0 '+ (dd.getMonth () +. 1): dd.getMonth () +. 1 // get the date of the current month, make up less than 10 0 
 var ? D = dd.getDate () <10' 0 '+ dd.getDate ( ): dd.getDate ()         
  // get the current number of several, up less than 10 0 
 the let dateRange = Y + '-' + m + '-' + D           

　

　Give a man a fish than giving the fishing, we can hope to understand better, limit the use of this method of control date, rather than blindly to copy the relevant code, copy may be faster in a short time, but want to improve their we must continue to understand the design of each parameter, usage ideas.

 

　If you have any questions to Feedback, feedback will reply in the first time, thank you!

　This article Tz Wuji original article, rewarding reading can make the right sidebar of coffee, reprint please indicate the source article: https://www.cnblogs.com/zhaohongcheng/