vant datetime-picker时间选择器只选择年份

相戀 / 2024-11-21 / 原文

1、template中

<van-field readonly clickable name="year" v-model="year" label="计分年度" placeholder="请选择计分年度" @click="showPickerYOpen" required :rules="[{ required: true, message: '' }]" />
<van-popup v-model="showPickerY" position="bottom">
    <van-datetime-picker :type="yearType" v-model="currentDate" :min-date="minDate" title="选择计分年度" @confirm="onConfirmTime" />
</van-popup>

2、script中

 data() {
    return {
       showPickerY: false,
       year: "",
       yearType: 'year-month',
       minDate: new Date(2000, 0, 1),
       currentDate: new Date(),
    }
 },
 methods:{
     // 打开计分年度选择框
    showPickerYOpen() {
      this.showPickerY = true;
      this.$nextTick(() => {
        if (this.yearType === 'year-month') {
          // 删除月份列
          let columns = this.$el.querySelectorAll('.van-picker__columns .van-picker-column')
          if (columns.length === 2) {
            columns[1].parentElement.removeChild(columns[1])
          }
        }
      })
    },
    // 选择计分年度
    onConfirmTime(val) {
      // 将字符串转换为Date对象
      var date = new Date(val);
      // 使用getFullYear()方法获取年份
      this.year = date.getFullYear();
      this.showPickerY = false
    },
 }