如圖， 點擊箭頭彈出時間選擇器， 選完時間后顯示在頁面

?

html代碼

?

<van-field
        class="xx"
        clickable
        name="datetimePicker"
        label="拜訪時間"
        placeholder="請選擇拜訪時間"
        @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是選中的時間，賦值給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，就會顯示到頁面
      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傳參是字符串? ?

"2023-01-17?17:43"文章來源地址http://www.zghlxwxcb.cn/news/detail-770265.html

到了這里，關(guān)于vant 組件，時間選擇器的應(yīng)用 van-datetime-picker的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！