问题描述:

由于在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>

本人是小卡拉米,如有错误可以指出,该处只做分享交流。

更多推荐