Recently, the company asked to write a time selector, which requires that after the start time is selected, the end time should not be earlier than the start time. In order to do this business, we have duplicated a lot of information on the Internet.It was found that vant rarely wrote with this framework in favor of the team.I just wrote one.The pit must not be well written by the gods. Don't spray it unless you like it.It's hard to agree or pay attention to something useful to you.

Here is the code:

The first step is to introduce vue.js vant.js

Versions of the two frameworks I use

  "vant": "^2.1.1",
    "vue": "^2.6.10"

Step 2: Import the components in the vant UI framework you need

import {
  Cell,
  Popup,
  DatetimePicker
} from "vant";


 components: {
    "van-cell": Cell,
    "van-popup": Popup,
    "van-datetime-picker": DatetimePicker
  },

Step 3 Selector Specific Code

 <!-- Time Selection Popup Layer -->
    <van-popup v-model="isPopShow" position="bottom">
      <!-- start time -->
      <van-datetime-picker
        @cancel="cancelPicker"
        @confirm="confirmPicker"
        v-if="datePicker == 'termStart'"
        v-model="startTime"
        type="date"
        :formatter="formatter"
        :max-date="currentTime"
      />
      <!-- End time -->
      <van-datetime-picker
        @cancel="cancelPicker"
        @confirm="confirmPicker"
        v-if="datePicker == 'termEnd'"
        v-model="endTime"
        type="date"
        :formatter="formatter"
        :min-date="startTime"
      />
    </van-popup>



data() {
    return {
         // start time
      startime: "",
      // End time
      endtime: "",
      currentTime: new Date(), // Start time cannot exceed current time
      startTime: new Date(), // start time
      endTime: new Date(), // End time
      datePicker: "", // Used to determine which selector to show or hide
      isPopShow: false // Pop-up layer hiding and displaying
    }
},
methods: {
     showDatePicker(picker) {
      //Pop-up layer and display time selector
      this.isPopShow = true;
      this.datePicker = picker;
    },
    cancelPicker() {
      // Selector Cancel Button Click Event
      this.isPopShow = false;
      this.datePicker = "";
    },
    // format date
    confirmPicker(value) {
      // OK button, time formatted and displayed on page
      var date = value;
      var m = date.getMonth() + 1;
      var d = date.getDate();
      if (m >= 1 && m <= 9) {
        m = "0" + m;
      }
      if (d >= 0 && d <= 9) {
        d = "0" + d;
      }
      var timer = date.getFullYear() + "-" + m + "-" + d;
      console.log(this.$refs);

      // this.$refs[this.datePicker].innerText = timer;
      if (this.datePicker === "termStart") {
        this.startime = timer;
        //  console.log(1111);
      } else if (this.datePicker === "termEnd") {
        this.endtime = timer;
        // console.log(222);
      }

      this.isPopShow = false;
      this.datePicker = "";
    },
    formatter(type, value) {
      // Format selector date
      if (type === "year") {
        return `${value}year`;
      } else if (type === "month") {
        return `${value}month`;
      }
      return value;
    }
  }
}

The dom structure is:

 <h3>Please select the query time</h3>
    <van-cell
      title="Start time:"
      :value="startime"
      border
      value-class="styleColor addspance"
      ref="termStart"
      @click="showDatePicker('termStart')"
    />
    <van-cell
      title="End time:"
      :value="endtime"
      border
      value-class="styleColor addspance"
      ref="termEnd"
      @click="showDatePicker('termEnd')"
    />

Okay, basically that's it. Here's all the code I wrote for this company page. If you're interested, you can see it

<template>
  <div class="main menzhenjianchaliebiao">
    <h3>Please select a hospital district</h3>
    <van-cell
      title="Current hospital district:"
      is-link
      value="XXX People's Hospital"
      center
      value-class="styleColor"
      @click="showyuanqu"
    />
    <h3>Please select a patient</h3>
    <van-cell
      title="Current Visitor:"
      is-link
      :value="jiuzhenren"
      center
      value-class="styleColor"
      @click="showjiuzhenren"
    />
    <h3>Please select the query time</h3>
    <van-cell
      title="Start time:"
      :value="startime"
      border
      value-class="styleColor addspance"
      ref="termStart"
      @click="showDatePicker('termStart')"
    />
    <van-cell
      title="End time:"
      :value="endtime"
      border
      value-class="styleColor addspance"
      ref="termEnd"
      @click="showDatePicker('termEnd')"
    />
    <!-- Query button -->
    <van-button type="info" @click="chaxun">query</van-button>
    <!-- Show Information Area -->
    <div class="info">
      //The time period you selected did not check the report, please check the time and query again
    </div>
    <!-- Select Courtyard Dialog -->
    <van-dialog v-model="showSex" :showConfirmButton="false" close-on-click-overlay lockScroll>
      <van-radio-group v-model="radio_yuanqu">
        <van-cell-group @click="handle_02">
          <van-cell title=" Xixia County People's Hospital" clickable checked @click="radio_yuanqu = '1'">
            <van-radio slot="right-icon" name="1" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-dialog>
    <!-- Select a Visitor Dialog -->
    <van-dialog v-model="showman" :showConfirmButton="false" close-on-click-overlay lockScroll>
      <van-radio-group v-model="radio_jiuzhenren">
        <van-cell-group @click="handle_01">
          <van-cell :title="radio_jiuzhenren" clickable checked>
            <van-radio slot="right-icon" :name="radio_jiuzhenren" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-dialog>
    <!-- Time Selection Popup Layer -->
    <van-popup v-model="isPopShow" position="bottom">
      <!-- start time -->
      <van-datetime-picker
        @cancel="cancelPicker"
        @confirm="confirmPicker"
        v-if="datePicker == 'termStart'"
        v-model="startTime"
        type="date"
        :formatter="formatter"
        :max-date="currentTime"
      />
      <!-- End time -->
      <van-datetime-picker
        @cancel="cancelPicker"
        @confirm="confirmPicker"
        v-if="datePicker == 'termEnd'"
        v-model="endTime"
        type="date"
        :formatter="formatter"
        :min-date="startTime"
      />
    </van-popup>
  </div>
</template>


<script>
import {
  CellGroup,
  Cell,
  Button,
  Toast,
  Radio,
  RadioGroup,
  Popup,
  DatetimePicker
} from "vant";

export default {
  components: {
    "van-cell-group": CellGroup,
    "van-cell": Cell,
    "van-button": Button,
    Toast: Toast,
    "van-radio-group": RadioGroup,
    "van-radio": Radio,
    "van-popup": Popup,
    "van-datetime-picker": DatetimePicker
  },
  data() {
    return {
      //  Name of patient passed in
      jiuzhenren: "ooo",
      radio_yuanqu: "1",
      radio_jiuzhenren: "ooo",

      showSex: false,
      showman: false,
      // start time
      startime: "",
      // End time
      endtime: "",
      currentTime: new Date(), // Start time cannot exceed current time
      startTime: new Date(), // start time
      endTime: new Date(), // End time
      datePicker: "", // Used to determine which selector to show or hide
      isPopShow: false // Pop-up layer hiding and displaying
    };
  },
  methods: {
    //   Click the Query button to process the event
    chaxun() {},
    //   Show Courtyard Dialog
    showyuanqu() {
      this.showSex = true;
    },
    //   Show the patient dialog
    showjiuzhenren() {
      this.showman = true;
    },
    // Hide hospital district by clicking
    handle_02() {
      this.showSex = false;
    },
    // Click to select a patient
    handle_01() {
      // this.userlist.msg_01 ='male'
      this.showman = false;
    },
    showDatePicker(picker) {
      //Pop-up layer and display time selector
      this.isPopShow = true;
      this.datePicker = picker;
    },
    cancelPicker() {
      // Selector Cancel Button Click Event
      this.isPopShow = false;
      this.datePicker = "";
    },
    // format date
    confirmPicker(value) {
      // OK button, time formatted and displayed on page
      var date = value;
      var m = date.getMonth() + 1;
      var d = date.getDate();
      if (m >= 1 && m <= 9) {
        m = "0" + m;
      }
      if (d >= 0 && d <= 9) {
        d = "0" + d;
      }
      var timer = date.getFullYear() + "-" + m + "-" + d;
      console.log(this.$refs);

      // this.$refs[this.datePicker].innerText = timer;
      if (this.datePicker === "termStart") {
        this.startime = timer;
        //  console.log(1111);
      } else if (this.datePicker === "termEnd") {
        this.endtime = timer;
        // console.log(222);
      }

      this.isPopShow = false;
      this.datePicker = "";
    },
    formatter(type, value) {
      // Format selector date
      if (type === "year") {
        return `${value}year`;
      } else if (type === "month") {
        return `${value}month`;
      }
      return value;
    }
  }
};
</script>

<style scoped>
.left {
  float: left;
}
.right {
  float: right;
}
.main,
body {
  background-color: #eee !important;
  font-size: 16px;
}
h3 {
  margin: 0;
  margin-left: 16px;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  color: #aaa;
  font-weight: normal;
}
.styleColor {
  color: #333;
}
.van-cell__value {
  text-align: left;
}
.info {
  height: 200px;
  background-color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  padding: 52px;
}
.addspance {
  margin-right: 24px;
}
.menzhenjianchaliebiao .van-cell {
  font-size: 14px;
}
.menzhenjianchaliebiao .van-button--info {
  border: 1px solid #4dadff;
}
</style>