设置 最小的可选日期**minDate**,最大可选日期**maxDate**,
默认选中的日期,mode为multiple或range是必须为数组格式**defaultDate**,
最大展示的月份数量**monthNum**
注意: 最大展示的月份数量 monthNum ,当monthNum数据太大时 会渲染的超级超级慢,一年内monthNum= 10 还能接受,monthNum= 100 时 得等最少 5秒,并且还很卡
![在这里插入图片描述](https://img-blog.csdnimg.cn/987e18280f074c50b08bea86e0fa595e.png
多个日期模式
template
<u-calendar
:show="dateshow"
:minDate='minDate'
:maxDate='maxDate'
:defaultDate="defaultDate"
mode="range"
allowSameDay
closeOnClickOverlay
round='15'
monthNum='100'
@confirm="Dateconfirm" @close='Dateclose'></u-calendar>
js
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.minDate = minyear + '-' + month + '-' + day;
let maxyear = year + 1;
// this.maxDate = maxyear + '-'+ month +'-' + day; 最大日期可选到一年后
this.maxDate = year + '-'+ month +'-' + day; // 最大日期可选到今天
this.defaultDate[0] = year + '-' + month + '-' + day;
}
单个日期模式 uniapp官网
<uni-calendar
ref="calendar"
:insert="false"
:lunar="true"
:start-date="minDate"
:end-date="maxDate"
@confirm='riliFun'
/>
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.minDate = minyear + '-' + month + '-' + day;
let maxyear = year + 1;
this.maxDate = year + '-'+ month +'-' + day;
this.defaultDate = year + '-' + month + '-' + day;
console.log(this.defaultDate,'-=',this.minDate, this.maxDate)
},
// 打开日历
openrili(){
this.$refs.calendar.open();
},
// 日历确认
riliFun(e){
console.log(e,'日历确定');
},
<style lang='scss'>
.uni-calendar-item--isDay{
background-color: #F9D31B !important;
color: #684110 !important;
font-size: 32rpx !important;
font-weight: 500 !important;
}
.uni-calendar-item--checked {
background-color: #F9D31B !important;
color: #684110 !important;
font-size: 32rpx !important;
font-weight: 500 !important;
}
.uni-calendar-item--isDay-text{
color: #684110 !important;
}
</style>
注意: 直接复制示例代码,是无法正常运行的。得先把组件 下载到项目中,才可以用