微信小程序picker实现年月日时五级联动

问题：

使用picker的multiSelector多列模式实现年月日时选择，这里的联动，只是调整日的天数，年份和月份的选择影响日的天数！

实现：

节点

<picker mode="multiSelector"
        bindcolumnchange="bindMultiPickerColumnChange"
        bindchange="pickerChange"
        value="{
     
     {multiIndex}}"
        range="{
     
     {list}}">
  {
   
   {date|| '选择时间'}}
</picker>

保存选中的年份，和月份索引，默认为第一个

let yearIndex = 0, monthIndex = 0;
Page({
    
    
....
)}

数据结构：list [ [年], [月], [日], [时], [分] ]，day:[ [30天], [31天], [28天], [29天]]

list:[
            ['2011','2012','2013','2014','2015','2016','2017','2018','2019','2020','2021','2022','2023','2024','2025','2026'],
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20','21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
            ['00', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12','13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',],
            ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20','21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '23', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
        ],
day: [
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20','21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20','21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20','21', '22', '23', '24', '25', '26', '27', '28'],
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20','21', '22', '23', '24', '25', '26', '27', '28', '29']
]

只关注，年份和月份的联动影响日的天数

// 滑动联动
bindMultiPickerColumnChange(e) {
    
    
  let column = e.detail.column; // 行
  let index = e.detail.value;
  if (column==0){
    
     // 年份
    yearIndex = index;
    this.monthSelect(monthIndex);
  } 
  if (column==1) this.monthSelect(index); // 月份
},

计数当前月份日的天数

// 2月份，平年28，闰年29,年份可以被4整除并且不能被100整除或者可以被400整除，这个年份就是闰年
monthSelect(index){
    
    
  let i = 2;
  monthIndex = index;
  if (index == 1) {
    
     // 2月份
    let year = this.data.list[0][yearIndex]; // 所在年份
    if (year%4 == 0 && year%100 != 0 || year%400 == 0) i = 3; // 闰年
  } else {
    
    
    index += index>6?2:1;
    i = index%2;
  }
  this.setData({
    
    
    ['list['+2+']']: this.data.day[i]
  });
},

完成选择

 // 选择
pickerChange(e) {
    
    
  let i = e.detail.value;
  let list = this.data.list;
  let date = `${
      
      list[0][i[0]]}年${
      
      list[1][i[1]]}月${
      
      list[2][i[2]]}日${
      
      list[3][i[3]]}时${
      
      list[4][i[4]]}分`
  this.setData({
    
      // date：2020年2月28日00时00分
    date
  })
},

注意⚠️：可以通过multiIndex来调整每次行的变化影响其他行选项所在的位置，这里感觉没必要调整，所以没实现，因为除了对应的天数不同外其他的都是一样的

value="{
   
   {multiIndex}}" // multiIndex: [0, 0, 0, 0, 0]