vant組件之時(shí)間選擇器的應(yīng)用詳解van-datetime-picker

更新時(shí)間：2026年02月10日 09:35:55 作者：是調(diào)調(diào)啊

文章描述了一個(gè)時(shí)間選擇器的使用過程,點(diǎn)擊箭頭彈出時(shí)間選擇器,選完時(shí)間后,時(shí)間字符串"2023-01-17 17:43"會(huì)通過visitTime參數(shù)傳遞

vant時(shí)間選擇器的應(yīng)用 van-datetime-picker

如圖：

點(diǎn)擊箭頭彈出時(shí)間選擇器

選完時(shí)間后顯示在頁面

html代碼

<van-field
        class="xx"
        clickable
        name="datetimePicker"
        label="拜訪時(shí)間"
        placeholder="請選擇拜訪時(shí)間"
        @click="choseTime"
        input-align="right"
        right-icon="arrow"
        :value="visitTime"
        :rules="[{ required: true, message: '' }]"
        readonly
      />


      <van-popup v-model="showPicker" position="bottom">
        <van-datetime-picker
          @cancel="cancel"
          @confirm="onConfirm"
          v-model="currentDate"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>

js代碼

data(){

 visitTime: "", 
 showPicker: false,
 minDate: "",
 maxDate: "",
 currentDate: new Date(),

},



methods:{

   onConfirm() {

      this.showPicker = false;

      // this.currentDate是選中的時(shí)間，賦值給date
      var date = this.currentDate;
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var h = date.getHours().toString().padStart(2, "0");
      var m = date.getMinutes().toString().padStart(2, "0");

      this.currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        h +
        seperator2 +
        m;  

     //把格式化后的日期賦值給visitTime，就會(huì)顯示到頁面
      this.visitTime = this.currentdate;
    },
    cancel() {
      this.showPicker = false;
      this.currentDate = new Date();
    },
    choseTime() {
      this.showPicker = true;
      // 日期選擇的最小日期
      this.minDate = new Date();
      //日期選擇的最大日期
      this.maxDate = new Date(2031, 11, 1);
    }


}

最后visitTime傳參是字符串