微信小程序日期选择器

    xiaoxiao2021-04-15  46

    小程序日期选择器

    解决了系统自带的日期选择器未解决的平闰年和大小月的天数限制 废话不多说   上图上代码

    JS代码

    const date = new Date() const years = [] const months = [] const days = [] const daysX = [] const daysD = [] const daysP = [] const daysR = [] var mDay for (let i = 1900; i <= date.getFullYear(); i++) { years.push(i) } for (let i = 1 ; i <= 12; i++) { months.push(i) } for (let i = 1 ; i <= 31; i++) { days.push(i) } for (let i = 1 ; i <= 30; i++) { daysX.push(i) } for (let i = 1 ; i <= 31; i++) { daysD.push(i) } for (let i = 1 ; i <= 28; i++) { daysP.push(i) } for (let i = 1 ; i <= 29; i++) { daysR.push(i) } Page({ data: { years: years, year: date.getFullYear(), months: months, month: 1, days: days, day: 1, year: date.getFullYear(), value: [9999, 0, 0], }, bindChange: function(e) { const val = e.detail.value var mdays let year = this.data.years[val[0]] let month = this.data.months[val[1]] let day = this.data.days[val[2]] if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){ mdays = daysR }else{ mdays = daysP } if(month == 4 || month == 6 || month == 9 || month == 11){ mdays = daysX }else if(month == 1 || month == 3 || month == 5 || month == 7 | month == 8 | month == 10 | month == 12){ mdays = daysD } this.setData({ year, month, day, days:mdays }) } })

    WXML代码

    <view> <view>{{year}}年{{month}}月{{day}}日</view> <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"> <picker-view-column> <view wx:for="{{years}}" style="line-height: 50px;text-align:center;">{{item}}年</view> </picker-view-column> <picker-view-column> <view wx:for="{{months}}" style="line-height: 50px;text-align:center;">{{item}}月</view> </picker-view-column> <picker-view-column> <view wx:for="{{days}}" style="line-height: 50px;text-align:center;">{{item}}日</view> </picker-view-column> </picker-view> </view>
    转载请注明原文地址: https://ju.6miu.com/read-671209.html

    最新回复(0)