vant 组件，时间选择器的应用 van-datetime-picker

最新推荐文章于 2024-05-22 11:26:23 发布

调调啊

最新推荐文章于 2024-05-22 11:26:23 发布

阅读量1w

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_49577940/article/details/128719060

版权

如图，点击箭头弹出时间选择器，选完时间后显示在页面

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"