SoFunction
Updated on 2025-04-03

vue el-date-picker Implementation code whose start date cannot be greater than the end date

HTML

      <el-form-item label="start date" prop="startTime">
        <el-date-picker clearable v-model="" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStartq" placeholder="Please select the start time">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="End Date" prop="endTime">
        <el-date-picker clearable v-model="" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEndq" placeholder="Please select the end time">
        </el-date-picker>
      </el-form-item>

JS: (Written in data)

The start date cannot be greater than the end date, and several situations are as follows:

The start date cannot be greater than the end date

      pickerOptionsStart: {
        disabledDate: time => {
          if () {
            return (
              () >
              new Date().getTime() -
                1 * 24 * 60 * 60 * 1000
            );
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          return (
            () <
            new Date().getTime() -
              8.64e7 +
              1 * 24 * 60 * 60 * 1000
          );
        }
      },

The start date cannot be greater than the end date --Select a date after today --Available today

      pickerOptionsStart: {
        disabledDate: time => {
          if () {
            return (
              () < () - 8.64e7 ||
              () >
                new Date().getTime() - 1 * 24 * 60 * 60 * 1000
            );
          }
          return () < () - 8.64e7;
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          return (
            () < () - 8.64e7 ||
            () <
              new Date().getTime() -
                8.64e7 +
                1 * 24 * 60 * 60 * 1000
          );
        }
      },

The start date cannot be greater than the end date--select a date after today--not select today

      pickerOptionsStart: {
        disabledDate: time => {
          if () {
            return (
              () < () - 8.64e7 ||
              () >
                new Date().getTime() - 1 * 24 * 60 * 60 * 1000
            );
          }
          return () < ();
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          return (
            () < () ||
            () <
              new Date().getTime() -
                8.64e7 +
                1 * 24 * 60 * 60 * 1000
          );
        }
      },

The start date cannot be greater than the end date--select a date within the next year

      pickerOptionsStart: {
        disabledDate: time => {
          if () {
            return (
              () <
              new Date().getTime() - 365 * 24 * 60 * 60 * 1000
            );
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          return (
            () >
            new Date().getTime() +
              8.64e7 +
              365 * 24 * 60 * 60 * 1000
          );
        }
      },

There is only one date box, and only one can choose from today

      pickerOptions: {
        disabledDate: time =&gt; {
          // return () < () - 8.64e7; // Optional today          return () &lt; ();//Not available today        }
      },

This is the article about vue el-date-picker whose start date cannot be greater than the end date. For more related vue el-date-picker whose start date cannot be greater than the end date, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!