在日常工作中,使用uniapp+uview的ui组件,使用日历组件默认是无法选择当前之前的日期,现在讲下解决的方法
设置 最小的可选日期minDate,最大可选日期maxDate,
默认选中的日期,mode为multiple或range是必须为数组格式defaultDate,
最大展示的月份数量monthNum
提示: 最大展示的月份数量 monthNum ,当monthNum数据太大时 会渲染的超级超级慢,一年内monthNum= 13 还能接受,monthNum= 100 时 得等最少 5秒,等的没脾气,如果 查往年的数据大于一年的,建议不要再往下看了,卡的怀疑人生
<u-calendar
title="服务日期"
:show="calendarShow"
@close="calendarShow = false"
@confirm="calendarConfirm"
:defaultDate="calendar.defaultDate"
:maxDate="calendar.maxDate"
:minDate="calendar.minDate"
:monthNum="calendar.monthNum"
></u-calendar>
calendarShow: false,
calendar: {
minDate: '',
maxDate: '',
defaultDate: '',
monthNum: 13,
},
// 设置默认日期,最大值为今天,最小值为去年今天
chooseTimed() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (month <= 9) {
month = '0' + month;
}
if (day <= 9) {
day = '0' + day;
}
let minyear = year - 1;
this.calendar.minDate = minyear + '-' + month + '-' + day;
this.calendar.maxDate = year + '-' + month + '-' + day;
this.calendar.defaultDate = year + '-' + month + '-' + day;
},
uview官网