picker-view、微信小程序自定義時間選擇器（非官方）

picker-view自定義時間選擇器

官網的自定義時間選擇器比較簡陋、日期不准

下面是我自己寫的一個demo

 

<view class="baseList">
  <view class="list clearfix">
    <view class="fl listName"><text class="reqIcon">*</text> 參展時間</view>
    <view class="listMain fr" bindtap="dateMainBtn">
      <!-- <input class="rightInput" placeholder="請選擇日期" name='startTime' value="{{timeInput}}"></input> -->
      <view>{{timeInput == '' ? '選擇時間' : timeInput}}</view>
    </view>
    <view class="propTimeBody" wx:if="{{propDate}}">
      <view class="propTimeMain">
        <view class="propTop clearfix">
          <text class="fl noBtn" bindtap="noBtnTime">取消</text>
          <text>{{year}}-{{month}}-{{day}} {{isDaytime ? "上午" : "下午"}}</text>
          <text class="fr okBtn" bindtap="okBtnTime">確定</text>
        </view>
        <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
          <picker-view-column>
            <view wx:for="{{years}}" wx:key="years" style="line-height: 50px; text-align: center;">{{item}}年</view>
          </picker-view-column>
          <picker-view-column>
            <view wx:for="{{months}}" wx:key="months" style="line-height: 50px; text-align: center;">{{item}}月</view>
          </picker-view-column>
          <picker-view-column>
            <view wx:for="{{days}}" wx:key="days" style="line-height: 50px; text-align: center;">{{item}}日</view>
          </picker-view-column>
          <picker-view-column>
            <view class="icon-container" style="line-height: 50px; text-align: center;">
              上午
            </view>
            <view class="icon-container" style="line-height: 50px; text-align: center;">
              下午
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</view>

.baseList{
  padding: 40rpx 30rpx 20rpx;
}
.baseList .list{
  font-size: 32rpx;
  color: #333;
  line-height: 80rpx;
  margin-bottom: 20rpx;
}
.baseList .list .listName{
  text-align: right;
  width: 200rpx;
}
.baseList .list .listMain{
  position: relative;
  width: 470rpx;
  padding: 0 20rpx;
  text-align: left;
  border: 1rpx solid #ddd;
  border-radius: 16rpx;
  line-height: 80rpx;
  height: 80rpx;
}

.propTimeBody{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.7);
}
.propTimeBody .propTimeMain{
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 111;
}
.propTimeBody .propTimeMain .propTop{
  text-align: center;
  padding: 30rpx 20rpx;
  font-size: 32rpx;
  color: #333;
}
.propTimeBody .propTimeMain .propTop .noBtn{
  color: #666;
}
.propTimeBody .propTimeMain .propTop .okBtn{
  color: #0084ff;
}

const date = new Date();//獲取系統日期
const years = []
const months = []
const days = []
const bigMonth = [1, 3, 5, 7, 8, 10, 12]

//將日期分開寫入對應數組

//年
var getYear = date.getFullYear()
var getMonth = date.getMonth()
var getDate = date.getDate()
for (let i = getYear - 20; i <= getYear + 20; i++) {
  years.push(i);
}

//月
for (let i = 1; i <= 12; i++) {
  months.push(i);
}

//日
for (let i = 1; i <= 31; i++) {
  days.push(i);
}

years: years,
    year: getYear,
    months: months,
    month: getMonth+1,
    days: days,
    day: getDate,
    value: [20, getMonth, getDate-1],
    isDaytime: true,
    timeInput: '',
    propDate: false,

dateMainBtn () {
    let setYear = this.data.year;
    let setMonth = this.data.month;
    let setDay = this.data.day
    let dateTimeBody = setYear + '-' + setMonth + '-' + setDay
    let todays = this.data.isDaytime === true ? '上午' : '下午'
    wx.setStorageSync('adminDate', dateTimeBody)
    wx.setStorageSync('adminTodays', todays)
    this.setData({
      propDate: true
    })
  },
  okBtnTime () {
   this.setData({
    propDate: false,
    timeInput: wx.getStorageSync('adminDate') + wx.getStorageSync('adminTodays'),
   })
  },
  noBtnTime () {
    this.setData({
      propDate: false
    })
  },
  //判斷元素是否在一個數組
  contains: function (arr, obj) {
    var i = arr.length;
    while (i--) {
      if (arr[i] === obj) {
        return true;
      }
    }
    return false;
  },
  setDays: function (day) {
    const temp = [];
    for (let i = 1; i <= day; i++) {
      temp.push(i)
    }
    this.setData({
      days: temp,
    })
  },
  //選擇滾動器改變觸發事件
  bindChange: function (e) {
    const val = e.detail.value;
    //判斷月的天數
    const setYear = this.data.years[val[0]];
    const setMonth = this.data.months[val[1]];
    const setDay = this.data.days[val[2]]
    //console.log(setYear + '-' + setMonth + '-' + setDay);
    //閏年
    if (setMonth === 2) {
      if (setYear % 4 === 0 && setYear % 100 !== 0) {
        console.log('閏年')
        this.setDays(29);
      } else {
        console.log('非閏年')
        this.setDays(28);
      }
    } else {
      //大月
      if (this.contains(bigMonth, setMonth)) {
        this.setDays(31)
      } else {
        this.setDays(30)
      }
    }
    this.setData({
      year: setYear,
      month: setMonth,
      day: setDay,
      isDaytime: !val[3]
    })
    let dateTimeBody = setYear + '-' + setMonth + '-' + setDay
    let todays = !val[3] === true ? '上午' : '下午'
    wx.setStorageSync('adminDate', dateTimeBody)
    wx.setStorageSync('adminTodays', todays)
  },