uniapp实现时间选择器动态获取年月日
·
问题描述:
由于在uniapp官网中找到的时间选择器,年份虽然固定,月固定是有12个月,但是日期是31日写死的,不能根据当前年和当前月动态更新日期。所以项目需要进行更新,实现能够根据年份月份进行对应的更新日期。
使用的相关组件为picker-view-column,这个可以在uniapp官网找到,但核心问题还是怎么去获取对应的日期。

这里的思想是,根据判断操作的是哪个选项,获取对应选择的年月日,分为以下几种情况:只是操作了年,只操作了月,只操作了日,只操作了月和日,只操作了年和日,操作了年,月,日 。因为这个组件,有一个监听的方法,我们需要根据监听改变的值去对应获取到对应的年月日。
获取到了对应年月就可以去对应获取日期了:
// 获取该年该月的天数
getDaysInYearMonth(year, month) {
// 每一次进行更新前,先清空日期数组
this.dates = [],
month = parseInt(month, 10);
// javascript中Date()对象的getDate()是获取时间对象对应于一个月中的某一天(1~31),当设置为0的时候,getDate()返回的就是最后一天,刚好对应我们需要的值。
var date = new Date(year, month, 0);
console.log(date.getDate())
for(var i =1;i<=date.getDate();i++) {
console.log(i)
var obj = {
id:'0'+i,
text:i<10? '0'+i : i
}
this.dates.push(obj)
}
},
将获取的日期数组进行展示使用就可以了。
<picker-view @change="bindChange" class="picker-view">
<picker-view-column>
<view class="picker-item" v-for="(item,index) in years" :key="item.id">{{item.text}}年</view>
</picker-view-column>
<picker-view-column>
<view class="picker-item" v-for="(item,index) in months" :key="item.id">{{item.text}}月</view>
</picker-view-column>
<picker-view-column>
<view class="picker-item" v-for="(item,index) in dates" :key="item.id">{{item.text}}日</view>
</picker-view-column>
</picker-view>
本人是小卡拉米,如有错误可以指出,该处只做分享交流。
更多推荐


所有评论(0)