ElementUI date picker time selection range limits

I need to use ElementUI’s date controls (in envelopes), but the underlying form is ElementUI +VUE+ other tool classes. I encountered the need to control the start and end dates, but I felt that without verification, I could control the dates as they were selected. The user experience will be better.

Picker-options attribute to restrict dates

1. Enter a single date and time box

Component code:<el-date-picker
       v-model="value1"
       type="date"
       placeholder="Select date"
       :picker-options="pickerOptions0">
</el-date-picker>
Copy the code

• Scenario 1: Settings Select today and later dates

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64 e7; }}}},Copy the code

• Scenario 2: Settings Select today and the dates before today

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64 the e6}}}},Copy the code

• Scenario 3: Settings Select a date after today (cannot select the time of the day)

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now(); }}}},Copy the code

• Scenario 4: Settings Select a date before today (can’t select today)

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now(); }}}},Copy the code

• Scenario 5: Settings Select the date from three months ago to today

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            let curDate = (new Date()).getTime();
            let three = 90 * 24 * 3600 * 1000;
            let threeMonths = curDate - three;
            return time.getTime() > Date.now() || time.getTime() < threeMonths;; }}}},Copy the code

2. Two date and time input boxes

Component code:<el-date-picker
       v-model="value1"
       type="date"
       placeholder="Start Date"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="value2"
       type="date"
       placeholder="End Date"
       :picker-options="pickerOptions1">
</el-date-picker>
Copy the code

• Scenario 1: The restriction end date cannot be greater than the start date

data(){
    return {
         pickerOptions0: {
                disabledDate: (time) = > {
                    if (this.value2 ! ="") {
                        return time.getTime() > Date.now() || time.getTime() > this.value2;
                    } else {
                        return time.getTime() > Date.now(); }}},pickerOptions1: {
                disabledDate: (time) = > {
                    return time.getTime() < this.value1 || time.getTime() > Date.now(); }}}},Copy the code