vant日期选择组件(格式yyyy-mm-dd 默认当天)

Html

<van-field
          readonly
          clickable
          name="datetimePicker"
          :value="lostDate"
          label="时间"
          placeholder="点击选择时间"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            type="date"
            :maxDate="maxDate"
            v-model="currentDate"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>

js

data() {
    return {
      showPicker: false,
      maxDate: new Date(),
      lostDate: this.formatter(),
      currentDate: new Date()
    };
  },
methods: {
    formatter(time) {
      let nowdata =time == null ?  new Date() : new Date(time);
      let year = nowdata.getFullYear();
      let month = nowdata.getMonth() + 1;
      let date = nowdata.getDate();
      let nowtime = year + "-";
      if (month < 10) {
        nowtime += "0";
      }
      nowtime += month + "-";
      if (date < 10) {
        nowtime += "0";
      }
      nowtime += date;

      return nowtime;
    },
    onConfirm(time) {
      this.LossDate = this.formatter(time);
      this.showPicker = false;
    },
  }

展示

 

posted @ 2022-06-13 15:19  微风吹过~  阅读(4352)  评论(0编辑  收藏  举报