微信小程序日期组件实现

主要代码实现

微信官方文档——picker-view的使用
先了解如何使用picker-view才能自己上手实现日期组件

获取当前月份天数

以上代码可以在控制台输出2020年2月份的天数

Date对象月份从0开始，即0表示1月份，以此类推。

在上面的代码中，我们初始化d为三月份的第0天，由于JavaScript中day的范围为1~31中的值，所以当设为0时，会向前 一天，也即表示上个月的最后一天。

new Date(2020,2,0).getDate()   //2020 年 2 月份 天数

封装一个获取 指定年月 天数 的函数

function getDays(year, month) {
    var d = new Date(year, month, 0)
    return d.getDate()
}

因为日期选择组件时间截至到当前，因此需要月份随着年份变化，天数随着月份变化

//获取当前时间
const now = new Date()



//处理日期格式   如果月份或者天数小于10  则变为  01，02，03...一次类推
function process(value) { // <10 加0
  return value < 10 ? '0' + value : value
}



// 获取  年份数组 固定的数组，在日期组件中并不需要改变  因为到当前时间年份都是固定的
let years = []
for (let year = 1990; year <= now.getFullYear(); year++) {
  years.push(year)
}



//默认的月份  1-12
let defaultMonths=[]
for (let index = 1; index <=12; index++) {
  defaultMonths.push(process(index))
}

//默认的天数 1-31
let defaultDays=[]
for (let index = 1; index <=31; index++) {
  defaultDays.push(process(index))
}

/*
设置 默认月份 默认天数 的原因是因为  显示当前选择日期 是按照
{{years[value[0]]}}-{{months[value[1]]}}-{{days[value[2]]}}  的格式

value  代表  
bindchange 事件   滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）

而 月份  天数  数组  会根据选择的不同而变化
因此需要默认的最大的 月份 天数 数组 作为基准   

如果不这样，会出现bug  可以自行测试
*/



// 当前月份数组  需要根据 年份 判断  因为当前时间可以是1-12中任意一个月份

function getCurrentYearMonth(year) { //获取当年 月份数  如果是今年 截止到当前日期
  let months = []
  let month = year == now.getFullYear() ? now.getMonth() + 1 : 12
  for (let i = 1; i <= month; i++) {
    months.push(process(i))
  }
  return months
}
let months = getCurrentYearMonth(now.getFullYear())



// 日  需要根据 月份 判断
function getCurrentMonthDay(year, month) { //获取当前月份天数
  let d = new Date(year, month, 0);
  let monthDay = d.getDate()
  let days = []
  d.getFullYear() == now.getFullYear() && d.getMonth() == now.getMonth() ? monthDay = now.getDate() : '' // 当前天数截至到当天
  for (let day = 1; day <= monthDay; day++) {
    days.push(process(day))
  }
  return days
}
let days = getCurrentMonthDay(now.getFullYear(), now.getMonth() + 1)

初始值value的设置

value 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。

picker-view 的 value 值设置 如果通过this.setData()在onLoad或者onShow中设置,会出现问题,因此需要在页面初始数据data中直接设置

Page({
data:{
 	//按日选择
    value: [years.length - 1, months.length - 1],

    //按月选择
    startValue: [years.length - 1, months.length - 1, days.length - 1],
    endValue: [years.length - 1, months.length - 1, days.length - 1]
}
})

实现效果

项目地址—包含更多功能组件插件（持续更新）

微信小程序各种基础及功能组件总结