HTML部分
<van-field
v-model="userListForm"
placeholder="请选择时间"
readonly="readonly"
@click="endTimePop = true"
/>
<van-datetime-picker
v-model="currentDate"
type="year-month"
@cancel="endTimePop = false"
@confirm="endTimePop = false"
@change="endTimeChange"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
JS部分
export default {
data() {
return {
minDate: new Date(), //开始时间范围
maxDate: new Date(2025, 12, 31), //结束时间范围
userListForm: "", //显示内容
currentDate: "",
endTimePop: false,
};
},
methods: {
/* 触发的事件 */
endTimeChange(g) {
let endTimeArr = g.getValues(); //["2019", "03", "22", "17", "28"]
/* 显示年月 */
this.userListForm = `{endTimeArr\[0\]}-{endTimeArr[1]}`;
},
/* 格式化时间 */
formatter(type, val) {
if (type === "year") {
return val + "年";
}
if (type === "month") {
return val + "月";
}
return val;
},
},
};
年、月、日、时、分、秒-----以此内推，照葫芦画瓢
