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 @   微风吹过~  阅读(5109)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示