uView日历控件(u-calendar)新增默认起止日期

这篇博客介绍了如何在Vue组件中添加默认开始日期`defaultStartDate`和结束日期`defaultEndDate`属性,并实现`setDate`函数来处理日期。同时,`changeData`函数被更新以处理跨月问题,当默认日期存在但组件内没有日期时,会调用`setDate`。`formatNumReverse`函数用于处理月份和日期前导0的问题。在父组件中,可以通过`:default-start-date`和`:default-end-date`传递日期,并在`nextTick`中确保日期设置生效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、在props中新增defaultStartDate、defaultEndDate属性

//默认开始日期
defaultStartDate:{
    type: String,
    default: ''
},
//默认结束日期
defaultEndDate:{
    type: String,
    default: ''
}

2、新增setDate函数

setDate(startDate, endDate = null) {
            const defaultStartDateArr = startDate.split('-')
            this.startYear = defaultStartDateArr[0]
            this.startMonth = this.formatNumReverse(defaultStartDateArr[1])
            this.startDay = this.formatNumReverse(defaultStartDateArr[2])
            this.startDate = this.activeDate = `${this.startYear}-${this.startMonth}-${this.startDay}`
            if (endDate) {
                const defaultEndDateArr = endDate.split('-')
                this.endYear = defaultEndDateArr[0]
                this.endMonth = this.formatNumReverse(defaultEndDateArr[1])
                this.endDay = this.formatNumReverse(defaultEndDateArr[2])
                this.endDate = `${this.endYear}-${this.endMonth}-${this.endDay}`
            }
        }

3、修改changeData函数

changeData() {
				this.days = this.getMonthDay(this.year, this.month);
				this.daysArr=this.generateArray(1,this.days)
				this.weekday = this.getWeekday(this.year, this.month);
				this.weekdayArr=this.generateArray(1,this.weekday)
				this.showTitle = `${this.year}年${this.month}月`;
                //修复跨月问题
                if (this.defaultStartDate  && !this.startDate && !this.endDate) this.setDate(this.defaultStartDate, this.defaultEndDate)
				if (this.isChange && this.mode == 'date') {
					this.btnFix(true);
				}
			},

由于我传的 defaultStartDate、defaultEndDate中,月、日带有前导0,所以需要新增formatNumReverse函数格式化数字

4、新增formatNumReverse函数

//反向格式化数字
formatNumReverse: function(num) {
    return num > 10 ? num : parseInt(num);
},

5、最后在父组件添加default-start-date、default-end-date

:default-start-date="start_date" :default-end-date="end_date"

//start_date: '2021-09-26'
//end_date: '2021-09-27'

6、在部分情况下直接设置default-start-date、default-end-date会无效,可以在nexTick中调用setDate函数设置

<u-calendar v-model="showDate" ref="calendar" :mode="range" @change="changeDate" 
                    :default-start-date="start_date" :default-end-date="end_date"/>

this.$nextTick(() => {
    this.$refs.calendar.setDate(this.start_date, this.end_date)
})

### 实现uView u-calendar 默认显示当前日期并在当前页面展示 为了实现在使用 `uView` 框架时,设置 `u-calendar` 组件默认显示当前日期,并确保其出现在当前页面,可以按照如下方法配置: #### 1. 设置默认显示当前日期 可以通过 JavaScript 获取当前日期的时间戳或格式化后的字符串来作为初始值传递给 `v-model` 属性。这使得日历组件加载时自动定位到今天的日期。 ```javascript // 在 Vue 的 data 或 setup 方法中定义 show 变量用于控制日历的显隐状态以及绑定选中的日期 export default { data() { return { // 初始化为 true 显示日历, false 则隐藏 show: true, currentDate: new Date().toISOString().split('T')[0], // 当前日期 YYYY-MM-DD 格式 } }, } ``` 对于模板部分,则需将上述变量绑定至相应属性: ```html <u-calendar v-model="show" :default-value="currentDate" <!-- 将 currentData 绑定到这里 --> ></u-calendar> ``` 此方式能够保证每次进入页面时,默认高亮今天这个日子[^1]。 #### 2. 让日历直接呈现在页面而非弹窗形式 为了让 `u-calendar` 不是以弹层的方式呈现而是固定在页面上的某个区域,只需将其放置于目标容器内即可,无需额外包裹其他触发器按钮或其他控件。根据描述,在uni-app环境下可以直接把日历放在任何地方而不必依赖弹出框[^2]: ```html <template> <div class="calendar-container"> <u-calendar v-model="show" :default-value="currentDate" mode="date" active-bg-color="#ff5722" btn-type="primary" ></u-calendar> </div> </template> <style scoped lang="scss"> .calendar-container{ width: 100%; height: auto; padding-top: 20px; } </style> ``` 这里设置了样式 `.calendar-container`, 调整了布局使其适应实际需求;同时指定了 `active-bg-color` 和 `btn-type` 参数来自定义外观风格.
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值