0
点赞
收藏
分享

微信扫一扫

写个上不了台盘的小玩意儿,微信小程序的dateTimePicker

RJ_Hwang 2022-01-21 阅读 61

微信原生的picker只有date和time类型的,没有date-time类型的,要支持date-time类型,可以用原生的multiPicker来实现。本来挺简单一玩意儿,好像网上一下没搜到,贴一下自己的实现:

index.js

const startYear = 2015;
const currentDate = new Date();
function getMaxDate(year,month){
  let maxDate = 31;
  if([4,6,9,19].indexOf(month)>-1){
    maxDate = 30;
  }else if(month==2){
    if(year % 400 == 0 || (year %4 == 0 && year % 100 >1)){
      maxDate=29;
    }else{
      maxDate=28
    }
  }
  return maxDate;
}
Page({
  data: {
    multiArray: [
      new Array(99).fill(1).map((a,b)=>(b+startYear)+"年"),
      new Array(12).fill(1).map((a,b)=>(b+1)+"月"),
      new Array(
        getMaxDate(
          currentDate.getFullYear(),
          currentDate.getMonth()+1
        )
      ).fill(1).map((a,b)=>(b+1)+"日"
      ),
      new Array(24).fill(1).map((a,b)=>(b)+"时"),
      new Array(12).fill(1).map((a,b)=>(b*5)+"分")
    ],
    multiIndex: [(currentDate.getFullYear()-startYear), currentDate.getMonth(), currentDate.getDate()-1, currentDate.getHours(), Math.ceil(currentDate.getMinutes()/5)]
  },
  
  bindMultiPickerChange: function (e) {
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    if(e.detail.column < 2 ){ //年月发生变化的时候,日期选择范围要变
      data.multiArray[2] = new Array(
        getMaxDate(
          data.multiIndex[0]+startYear,
          data.multiIndex[1]+1)
        ).fill(1).map((a,b)=>(b+1)+"日"
      )
    }
    this.setData(data);
  }
})

index.wxml:

<view class="section">
  <view class="section__title">日期时间选择器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      当前选择:{{multiArray[0][multiIndex[0]]}},
      {{multiArray[1][multiIndex[1]]}},
      {{multiArray[2][multiIndex[2]]}},
      {{multiArray[3][multiIndex[3]]}},
      {{multiArray[4][multiIndex[4]]}}
    </view>
  </picker>
</view>

这里选择分钟的时候只支持到5分钟一选。需要不同的分钟粒度或者需要选择秒的要自己改一下。

举报

相关推荐

0 条评论