微信小程序日期選擇器如何使用

本文小編為大家詳細(xì)介紹“微信小程序日期選擇器如何使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“微信小程序日期選擇器如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

需求：在小程序開(kāi)發(fā)中，時(shí)常會(huì)遇到日期選擇器、時(shí)間選擇器或者地區(qū)選擇器來(lái)進(jìn)行選擇的功能。往往設(shè)計(jì)圖上面并不是按部就班沿用官方提供那種控件樣式來(lái)實(shí)現(xiàn)顯示，比如：樣式會(huì)多樣化、功能會(huì)復(fù)雜化。這時(shí)我們就要自己寫一個(gè)適合需求的組件。

下面跟大家分享下我寫的一個(gè)自定義日期選擇器組件

首先上效果圖看看:

主要步驟：

第一步：首先自定義選擇器組件需要用到picker-view跟picker-view-column。使用方法如下~

<picker-view indicator-class="picker-indicator" value="{{pickerIndexList}}" bindchange="bindChangeDate">
    <picker-view-column>
        <view wx:for="{{yearList}}" wx:key="index" class="{{pickerIndexList[0]==index?'txt-active':''}}">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
        <view wx:for="{{monthList}}" wx:key="index" class="{{pickerIndexList[1]==index?'txt-active':''}}">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
        <view wx:for="{{dayList}}" wx:key="index" class="{{pickerIndexList[2]==index?'txt-active':''}}">{{item}}日</view>
    </picker-view-column>
</picker-view>

第二步：打開(kāi)選擇器時(shí)就要獲取到當(dāng)前的年月日，我這里使用了for遍歷直接生成年份數(shù)組跟月份數(shù)組。注：天數(shù)根據(jù)年份跟月份動(dòng)態(tài)生成

//獲取當(dāng)前日期
  getCurrentDate: function (e) {
    var that = this;
    var yearList = [], monthList = [], dayList = [];
    for (var i = new Date().getFullYear(); i <= 2050; i++) {//年份
      yearList.push(i);
    }
    for (var i = 1; i <= 12; i++) {//月份
      monthList.push(i);
    }
    var myDate = new Date();
    var currentYearIndex = yearList.findIndex(o => o == myDate.getFullYear());
    var currentMonthIndex = monthList.findIndex(o => o == myDate.getMonth() + 1);
    var dayList = that.getDayList(currentYearIndex, currentMonthIndex);//天
    var currentDayIndex = dayList.findIndex(o => o == myDate.getDate());
    var pickerIndexList = that.data.pickerIndexList;
    pickerIndexList[0] = currentYearIndex;
    pickerIndexList[1] = currentMonthIndex;
    pickerIndexList[2] = currentDayIndex;
    app.globalData.dateIndexList = pickerIndexList;
    that.setData({
      yearList,
      monthList,
      dayList,
    })
  },

第三步：在選擇的過(guò)程中，選擇器有個(gè)改變事件，當(dāng)年份或者月份改變的時(shí)候，天數(shù)要隨之變化

//日期選擇改變事件
 bindChangeDate: function (e) {
    var that = this;
    var pickerColumnList = e.detail.value;
    that.setData({
      dayList: that.getDayList(pickerColumnList[0], pickerColumnList[1]),
      pickerIndexList: pickerColumnList,
    })
 },

有個(gè)樣式的小問(wèn)題：如選中行背景色寫在picker-view控件中，則會(huì)出現(xiàn)滾動(dòng)時(shí)背景色也會(huì)隨著動(dòng)，體驗(yàn)不好。所以我這里寫了一個(gè)占位符，設(shè)置背景色，滾動(dòng)選擇時(shí)背景色就不會(huì)受到影響

<!-- 選中行背景色 start-->
<view class="top-background">
    <view></view>
    <view></view>
    <view></view>
</view>
<!-- 選中行背景色 end-->

下面是全部代碼~~

wxml：

<!-- 自定義選擇日期層 start -->
<view class="date-layer" wx:if="{{isShowDateLayer}}" catchtouchmove="catchTouchMove">
    <view class="layer-box">
        <view class="box-top">
            <!-- 選中行背景色 start-->
            <view class="top-background">
                <view></view>
                <view></view>
                <view></view>
            </view>
            <!-- 選中行背景色 end-->
            <picker-view indicator-class="picker-indicator" value="{{pickerIndexList}}" bindchange="bindChangeDate">
                <picker-view-column>
                    <view wx:for="{{yearList}}" wx:key="index" class="{{pickerIndexList[0]==index?'txt-active':''}}">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view wx:for="{{monthList}}" wx:key="index" class="{{pickerIndexList[1]==index?'txt-active':''}}">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view wx:for="{{dayList}}" wx:key="index" class="{{pickerIndexList[2]==index?'txt-active':''}}">{{item}}日</view>
                </picker-view-column>
            </picker-view>
        </view>
        <view class="box-bottom">
            <button class="btn-confirm" bindtap="bindConfirmDate">確定</button>
            <button class="btn-cancel" bindtap="bindCancelDate">取消</button>
        </view>
    </view>
</view>
<!-- 選擇日期層 end -->

js：

/**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    pickerIndexList: [0, 0, 0],//日期選擇器下標(biāo)
    isShowDateLayer: false,//是否顯示日期彈層
    txtDate: '請(qǐng)選擇提貨日期',//選中日期
    isSeltDate: false,//是否選擇日期
  },

  // 截獲豎向滑動(dòng)
  catchTouchMove: function (res) {
    return true;
  },

  //獲取天數(shù)列表
  getDayList: function (year, month) {
    var that = this;
    var dayList;
    switch (month + 1) {
      case 1:
      case 3:
      case 5:
      case 7:
      case 8:
      case 10:
      case 12: dayList = that.getDayNum(31);
        break;
      case 4:
      case 6:
      case 9:
      case 11: dayList = that.getDayNum(30);
        break;
      case 2: dayList = that.getDayNum((that.data.yearList[year] % 4 == 0 && that.data.yearList[year] % 100 != 0 || that.data.yearList[year] % 400 == 0) ? 29 : 28);
        break;
    }
    return dayList;
  },

  //獲取天數(shù)
  getDayNum: function (num) {
    var dayList = [];
    for (var i = 1; i <= num; i++) {
      dayList.push(i);
    }
    return dayList;
  },

  //打開(kāi)選擇日期彈層
  bindOpenDateLayer: function (e) {
    var that = this;
    var pickerIndexList = that.data.pickerIndexList;
    that.setData({
      isShowDateLayer: !that.data.isShowDateLayer,
      dayList: that.getDayList(pickerIndexList[0], pickerIndexList[1]),
    })
  },

  //日期選擇改變事件
  bindChangeDate: function (e) {
    var that = this;
    var pickerColumnList = e.detail.value;
    that.setData({
      dayList: that.getDayList(pickerColumnList[0], pickerColumnList[1]),
      pickerIndexList: pickerColumnList,
    })
  },

  //選擇日期彈層確定按鈕
  bindConfirmDate: function (e) {
    var that = this;
    var pickerIndexList = that.data.pickerIndexList;
    var txtDate = that.data.yearList[pickerIndexList[0]] + '-' + that.data.monthList[pickerIndexList[1]] + '-' + that.data.dayList[pickerIndexList[2]];
    that.setData({
      isShowDateLayer: false,
      pickerIndexList,
      txtDate,
      isSeltDate: true,
    })
  },

  //選擇日期彈層取消按鈕
  bindCancelDate: function (e) {
    var that = this;
    var pickerIndexList = that.data.pickerIndexList;
    that.setData({
      isShowDateLayer: !that.data.isShowDateLayer,
    })
    var yearList = that.data.yearList;
    var monthList = that.data.monthList;
    var txtDate = that.data.txtDate;
    var yearIndex = yearList.findIndex(o => o == parseInt(txtDate.slice(0, txtDate.indexOf('-'))));//年份下標(biāo)
    var monthIndex = monthList.findIndex(o => o == parseInt(txtDate.slice(txtDate.indexOf('-') + 1, txtDate.lastIndexOf('-'))));//月份下標(biāo)
    var dayList = that.getDayList(yearIndex, monthIndex);//天數(shù)
    if (that.data.isSeltDate) {//選擇過(guò)日期
      if (txtDate == (yearList[pickerIndexList[0]] + '-' + monthList[pickerIndexList[1]] + '-' + dayList[pickerIndexList[2]]))
        that.setData({ pickerIndexList })
      else
        that.setData({ pickerIndexList: [yearIndex, monthIndex, dayList.findIndex(o => o == parseInt(txtDate.slice(txtDate.lastIndexOf('-') + 1, txtDate.length)))] })
    } else {//未選擇過(guò)日期
      that.setData({
        pickerIndexList: app.globalData.dateIndexList,
      })
    }
  },

  //阻止冒泡事件
  catchLayer: function (e) { },

  //獲取當(dāng)前日期
  getCurrentDate: function (e) {
    var that = this;
    var yearList = [], monthList = [], dayList = [];
    for (var i = new Date().getFullYear(); i <= 2050; i++) {//年份
      yearList.push(i);
    }
    for (var i = 1; i <= 12; i++) {//月份
      monthList.push(i);
    }
    var myDate = new Date();
    var currentYearIndex = yearList.findIndex(o => o == myDate.getFullYear());
    var currentMonthIndex = monthList.findIndex(o => o == myDate.getMonth() + 1);
    var dayList = that.getDayList(currentYearIndex, currentMonthIndex);//天
    var currentDayIndex = dayList.findIndex(o => o == myDate.getDate());
    var pickerIndexList = that.data.pickerIndexList;
    pickerIndexList[0] = currentYearIndex;
    pickerIndexList[1] = currentMonthIndex;
    pickerIndexList[2] = currentDayIndex;
    app.globalData.dateIndexList = pickerIndexList;
    that.setData({
      yearList,
      monthList,
      dayList,
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {
    var that = this;
    that.getCurrentDate();//獲取當(dāng)前時(shí)間
    that.setData({
      pickerIndexList: that.data.pickerIndexList
    })
  },

wxss：

/* 日期選擇彈框 start */
.main .date-layer {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.65);
  position: fixed;
  top: 0;
  z-index: 20;
}

.date-layer .layer-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
}

.date-layer .layer-box .box-top {
  padding: 30rpx 0;
  position: relative;
}

.date-layer .layer-box picker-view {
  height: 120px;
  width: 88%;
  margin: 0 auto;
}

.date-layer .layer-box .picker-indicator {
  height: 40px;
  line-height: 40px;
}

.date-layer .layer-box picker-view-column view {
  line-height: 42px;
  text-align: center;
  width: 96%;
  margin: 0 auto;
}

.date-layer .layer-box .box-top .top-background {
  height: 80rpx;
  width: 88%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

.layer-box .box-top .top-background view {
  height: 100%;
  width: 96%;
  margin: 0 auto;
  background: rgba(195, 218, 49, 0.12);
  border-top: 2rpx solid #D9E87D;
  border-bottom: 2rpx solid #C3DA31;
  margin: 0 4rpx;
  box-sizing: border-box;
}

.date-layer .layer-box .box-bottom {
  display: flex;
}

.date-layer .layer-box .box-bottom button {
  margin: 0;
  padding: 0;
  width: 50%;
  border-radius: 0;
  border: none;
  background: #fff;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 34rpx;
  border-top: 2rpx solid #D8D8D8;
}

.date-layer .layer-box .box-bottom .btn-confirm {
  border-right: 1rpx solid #D8D8D8;
  color: #C3DA31;
}

.date-layer .layer-box .box-bottom .btn-cancel {
  border-left: 1rpx solid #D8D8D8;
  color: #B1B1B4;
}
/* 日期選擇彈框 end */

讀到這里，這篇“微信小程序日期選擇器如何使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。