【uview calendar日历 】 u-view 2.0 的日历组件默认是无法选择当天之前的日期,解决方法

设置  最小的可选日期**minDate**,最大可选日期**maxDate**
默认选中的日期,mode为multiple或range是必须为数组格式**defaultDate**
最大展示的月份数量**monthNum** 

注意: 最大展示的月份数量 monthNum ,当monthNum数据太大时 会渲染的超级超级慢,一年内monthNum= 10 还能接受,monthNum= 100 时 得等最少 5秒,并且还很卡

uview官网

在这里插入图片描述

![在这里插入图片描述](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>

在这里插入图片描述
注意: 直接复制示例代码,是无法正常运行的。得先把组件 下载到项目中,才可以用

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
非常抱歉,我之前的回答有误,uView2 中没有 `u-stepper` 步进器组件。 不过,你可以使用 `u-number-box` 数字框组件来实现步进器的功能。以下是一个示例: ```vue <template> <u-popup :visible.sync="showPopup" :position="'bottom'"> <div class="popup-header">科技风格页面弹窗</div> <div class="popup-body"> <u-form @submit.prevent="onSubmit"> <u-form-item label="标题"> <u-input v-model="form.title" placeholder="请输入标题"></u-input> </u-form-item> <u-form-item label="下拉列表"> <u-select v-model="form.select" :options="options"></u-select> </u-form-item> <u-form-item label="步进器"> <u-number-box v-model="form.stepper" :min="1" :max="10"></u-number-box> </u-form-item> <u-button type="primary" native-type="submit">确认</u-button> </u-form> </div> </u-popup> </template> <script> export default { data() { return { showPopup: false, form: { title: '', select: '', stepper: 1 }, options: [ { label: '项1', value: '1' }, { label: '项2', value: '2' }, { label: '项3', value: '3' } ] } }, methods: { onSubmit() { // 提交表单 console.log(this.form) // 关闭弹窗 this.showPopup = false } } } </script> <style> .popup-header { font-size: 16px; font-weight: bold; padding: 16px; border-bottom: 1px solid #ddd; } .popup-body { padding: 16px; } </style> ``` 在这个示例中,我们使用了 `u-number-box` 数字框组件来代替步进器,并设置了 `min` 和 `max` 属性来限制数字范围。其他组件的使用方法和上一个示例相同。 再次感谢您的指正,希望这次回答能够帮到您。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值