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
},
}