微信小程序日期選擇器使用詳解
更新時間：2022年07月11日 16:43:05 作者：喵喵學(xué)姐
這篇文章主要為大家詳細(xì)介紹了微信小程序日期選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序日期選擇器的具體代碼，供大家參考，具體內(nèi)容如下
需求：在小程序開發(fā)中，時常會遇到日期選擇器、時間選擇器或者地區(qū)選擇器來進(jìn)行選擇的功能。往往設(shè)計圖上面并不是按部就班沿用官方提供那種控件樣式來實(shí)現(xiàn)顯示，比如：樣式會多樣化、功能會復(fù)雜化。這時我們就要自己寫一個適合需求的組件。
下面跟大家分享下我寫的一個自定義日期選擇器組件
首先上效果圖看看:
主要步驟：
第一步：首先自定義選擇器組件需要用到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>第二步：打開選擇器時就要獲取到當(dāng)前的年月日，我這里使用了for遍歷直接生成年份數(shù)組跟月份數(shù)組。注：天數(shù)根據(jù)年份跟月份動態(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,
? ? })
? },第三步：在選擇的過程中，選擇器有個改變事件，當(dāng)年份或者月份改變的時候，天數(shù)要隨之變化
//日期選擇改變事件
?bindChangeDate: function (e) {
? ? var that = this;
? ? var pickerColumnList = e.detail.value;
? ? that.setData({
? ? ? dayList: that.getDayList(pickerColumnList[0], pickerColumnList[1]),
? ? ? pickerIndexList: pickerColumnList,
? ? })
?},有個樣式的小問題：如選中行背景色寫在picker-view控件中，則會出現(xiàn)滾動時背景色也會隨著動，體驗不好。所以我這里寫了一個占位符，設(shè)置背景色，滾動選擇時背景色就不會受到影響
<!-- 選中行背景色 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：
/**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? pickerIndexList: [0, 0, 0],//日期選擇器下標(biāo)
? ? isShowDateLayer: false,//是否顯示日期彈層
? ? txtDate: '請選擇提貨日期',//選中日期
? ? isSeltDate: false,//是否選擇日期
? },
? // 截獲豎向滑動
? 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;
? },
? //打開選擇日期彈層
? 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) {//選擇過日期
? ? ? 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 {//未選擇過日期
? ? ? 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)聽頁面加載
? ?*/
? onLoad: function (options) {
? ? var that = this;
? ? that.getCurrentDate();//獲取當(dāng)前時間
? ? 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 */介紹到這里就可以實(shí)現(xiàn)一個不管是自己還是設(shè)計圖都想要的選擇器啦
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)文件動態(tài)順序載入的方法
這篇文章主要介紹了JS實(shí)現(xiàn)文件動態(tài)順序載入的方法,實(shí)例分析了基于Mootools框架實(shí)現(xiàn)動態(tài)載入的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS相冊圖片抖動放大展示效果的示例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
JavaScript中的object轉(zhuǎn)換成number或string規(guī)則介紹
這篇文章主要介紹了JavaScript中的object轉(zhuǎn)換成number或string規(guī)則介紹,本文講解了object自動轉(zhuǎn)換成string的規(guī)則、object自動轉(zhuǎn)換成number的規(guī)則等內(nèi)容,需要的朋友可以參考下2014-12-12
JavaScript模擬實(shí)現(xiàn)加入購物車飛入動畫效果
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript模擬實(shí)現(xiàn)加入購物車飛入動畫效果,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下2024-03-03
javascript學(xué)習(xí)總結(jié)之js使用技巧
本篇文章給大家分享javascript學(xué)習(xí)總結(jié)之js使用技巧，都是精華喔～小伙伴快來學(xué)習(xí)吧。2015-09-09
這篇文章主要介紹了js簡單實(shí)現(xiàn)圖片延遲加載的方法,涉及javascript針對頁面元素的遍歷與動態(tài)設(shè)置技巧,需要的朋友可以參考下2016-07-07
JavaScript實(shí)現(xiàn)動態(tài)生成表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動態(tài)生成表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
基于javascript實(shí)現(xiàn)漂亮的頁面過渡動畫效果附源碼下載
本文通過javascript實(shí)現(xiàn)漂亮的頁面過濾動畫效果，用戶通過點(diǎn)擊頁面左側(cè)的菜單，對應(yīng)的頁面加載時伴隨著滑動過濾動畫，并帶有進(jìn)度條效果。用戶體驗度非常好，感興趣的朋友一起看看吧2015-10-10
之前我們講到數(shù)組遍歷, 本文我們更進(jìn)一步, 講講如何提高遍歷的效率. 下面這篇文章主要深入的介紹了Javascript中作用域鏈和閉包的相關(guān)資料，需要的朋友可以參考下2017-04-04
eval(function(p,a,c,k,e,d)系列解密javascript程序
在網(wǎng)上下載源代碼時，很可能發(fā)現(xiàn)代碼里的JS腳本看不懂，這是由于JS加密造成的。如果你發(fā)現(xiàn)JS是以eval(function(p,a,c,k,e,r){e=function(c)開頭的，看到這個頁面你就可以解決他2007-04-04