SoFunction
Updated on 2025-04-05

ElementUI time selector limits the use of disabledData

Regarding the problem that the end time cannot be greater than the start time, in elementui we use the disabledDate option provided by the official.
HTML: Add:picker-options attribute to the selector

//Start time<el-date-picker v-model="startDate"></el-date-picker>
//Deadline<el-date-picker v-model="endDate" :picker-options="endDateOpt"></el-date-picker>

DATA:

I will briefly write down the key here.

data() {
    return {
        startDate: null,
        endDate: null,
        endDateOpt: {
            disabledData: (time) => {
                return () < ;
            }
        }
    }
}

The above is a single selection box, if it is a dateange or datetimerange:

<el-date-picker v-model="value1" type="daterange" 
    :picker-options="pickerOptions">
</el-date-picker>
data() {
   return {
     value: '',
     pickerOptions2: {
         disabledDate: (time) =&gt; {
             return () &gt; new Date(2017, 11, 30) || () &lt; new Date(2017, 11, 11);//Note that yes||Not&&         }
     }
   };
}

PS: element time selector, disabledDate restricts multiple conditions at the same time

&lt;el-date-picker
        v-model=""
        type="daterange"
        range-separator="-"
        unlink-panels
        value-format="yyyy-MM-dd"
        start-placeholder="start date"
        end-placeholder="End Date"
        class="data_piccker"
        style="width:240px"
        :picker-options="pickerOptions"
      &gt;&lt;/el-date-picker&gt;
pickerOptions: {
        onPick: ({ maxDate, minDate }) =&gt; {
           = ()
          if (maxDate) {
             = ''
          }
        },
        disabledDate: (time) =&gt; {
           const year = 365 * 24 * 3600 * 1000
           // Time stamp from a year ago           let lastyear =  - year 
          //A date has been selected...          if ( !== '') {
            const day31 = 31 * 24 * 3600 * 1000
            //The selected date is 31 days before the time stamp            let datarangeb =  - day31
            //The selected date will be pushed back for 31 days            let datarangea =  + day31
            //If the pushed back date is earlier than today, then set to today            if (datarangea &gt; new Date()) {
              datarangea = new Date()
            }
            //Use or || can limit multiple conditions at the same time            return () &lt; datarangeb || () &gt; datarangea 
          }
          //The date is not selected. The default status is not selected before the day and is not advisable one year ago.          return () &gt; ()  || () &lt; lastyear 
        },     
   },

This is the article about the use of disabledData for ElementUI time selector restriction selection range. For more related ElementU disabledData content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!