标签：微信 31 month let year 年月日 years 选择器 day

在微信小程序项目开发中，大家往往会遇到日期选择器的需求，分享一下关于日期选择器的代码，可选择具体的日期。

一、.js代码

//获取年月日
const date = new Date()
const nowYear = date.getFullYear()
const nowMonth = date.getMonth() + 1
const nowDay = date.getDate()

let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
// 根据年月 获取当月的总天数
let getDays = function (year, month) {
    console.log(year, month);
    if (month === 2) {
        return ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
    } else {
        return daysInMonth[month - 1]
    }
}
// 根据年月日设置当前月有多少天 并更新年月日数组
let setDate = function (year, month, day, _th) {
    let daysNum = year === nowYear && month === nowMonth ? nowDay : getDays(year, month)
    day = day > daysNum ? 1 : day
    let monthsNum = year === nowYear ? nowMonth : 12
    let years = []
    let months = []
    let days = []
    let yearIdx = 9999
    let monthIdx = 0
    let dayIdx = 0

    // 重新设置年份列表
    for (let i = 1950; i <= nowYear; i++) {
        years.push(i)
    }
    years.map((v, idx) => {
        if (v === year) {
            yearIdx = idx
        }
    })
    // 重新设置月份列表
    for (let i = 1; i <= monthsNum; i++) {
        months.push(i)
    }
    months.map((v, idx) => {
        if (v === month) {
            monthIdx = idx
        }
    })
    // 重新设置日期列表
    for (let i = 1; i <= daysNum; i++) {
        days.push(i)
    }
    days.map((v, idx) => {
        if (v === day) {
            dayIdx = idx
        }
    })

    _th.setData({
        years: years, //年份列表
        months: months, //月份列表
        days: days, //日期列表
        value: [yearIdx, monthIdx, dayIdx],
        year: year,
        month: month,
        day: day
    })
}
Page({

    /**
     * 页面的初始数据
     */
    data: {
        years: [],
        months: [],
        days: [],
        year: nowYear,
        month: nowMonth,
        day: nowDay,
        value: [9999, 1, 1]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onl oad: function (options) {
        setDate(this.data.year, this.data.month, this.data.day, this)
    },
    bindChange: function (e) {
        let val = e.detail.value
        setDate(this.data.years[val[0]], this.data.months[val[1]], this.data.days[val[2]], this)
    }
})

二、.WXML代码

<view class="birthBox">
    <label>日期</label>
    <picker-view wx:if="{{years.length>0 && months.length>0 && days.length>0}}" style="width: 100%; height: 180rpx;" value="{{value}}" bindchange="bindChange">
        <picker-view-column>
            <view wx:for="{{years}}" wx:key="index">{{item}}年</view>
        </picker-view-column>
        <picker-view-column>
            <view wx:for="{{months}}" wx:key="index">{{item}}月</view>
        </picker-view-column>
        <picker-view-column>
            <view wx:for="{{days}}" wx:key="index">{{item}}日</view>
        </picker-view-column>
    </picker-view>
</view>

三、如果需要点击确定后才改变日期可设置中间变量进行接收，点击确认后进行赋值

标签：微信,31,month,let,year,年月日,years,选择器,day
来源： https://blog.csdn.net/ct5211314/article/details/120265301

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。