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

这篇具有很好参考价值的文章主要介绍了vant 组件，时间选择器的应用 van-datetime-picker。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

van-datetime-picker,前端,vue.js,javascript

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"文章来源地址https://www.toymoban.com/news/detail-770265.html

到了这里，关于vant 组件，时间选择器的应用 van-datetime-picker的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！