ElementUI is a SET of UI framework based on Vue2.0 launched by Ele. me. Of course, it was upgraded with the launch of Vue3 last year. Here we take Element of Vue2.0 as an example

The official documentation uses the picker-options attribute to limit the available dates, supplemented by examples here

Component code for a single input box

<el-date-picker
    v-model="date1"
    type="date"
    placeholder="Select date"
    :picker-options="pickerOption">
</el-date-picker>
Copy the code

Scenario 1: Only today and after today can be selected

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

Scenario 2: Select only the date of today and the date before today.

data() {
    return {
        date1: ' '.pickerOption: {
            disabledDate(time) {
                return time.getTime() > Date.now() - 8.64 e7; }}}}Copy the code

Scenario 3: Select a date after today (not including today)

Note: includes the day plus the = symbol <=

data() {
    return {
        date1: ' '.pickerOption: {
            disabledDate(time) {
                return time.getTime() < Date.now(); }}}}Copy the code

Scenario 4: Select the date before today (not including today)

Note: includes the day plus = symbol >=

data() {
    return {
        date1: ' '.pickerOption: {
            disabledDate(time) {
                return time.getTime() > Date.now(); }}}}Copy the code

Situation 5: Select the date from three months ago to today (including today)

data (){
   return {
        date1: ' '.pickerOptions: {
           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

Scenario 6: Select the date from the current month to the current day: for example, today 20th, only select a date from May 01 to May 20

data() {
    return {
        date1: ' '.pickerOption: {
            disabledDate(time) {
                let curDate = (new Date()).getTime();
                let curDay = (new Date()).getDate();
                let three = curDay * 24 * 3600 * 1000;
                let threeMonths = curDate - three;
                return time.getTime() > Date.now() || time.getTime() < threeMonths;; }}}}Copy the code

Two input box component code

<el-date-picker
       v-model="date2"
       type="date"
       placeholder="Start Date"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="date3"
       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.date3 ! ="") {
                        return time.getTime() > Date.now() || time.getTime() > this.date3;
                    } else {
                        return time.getTime() > Date.now(); }}},pickerOptions1: {
                disabledDate: (time) = > {
                    return time.getTime() < this.date2 || time.getTime() > Date.now(); }}}},Copy the code

Filter for dates in the selection range type=”daterange”, equivalent to a single input box, using the parameter time to determine