微信小程序日期選擇器使用實(shí)例

3403771864 發(fā)布于2022-11-19 22:18 / 783人閱讀

　　需求：在小程序開發(fā)中，時(shí)常會(huì)遇到日期選擇器、時(shí)間選擇器或者地區(qū)選擇器來進(jìn)行選擇的功能。這是可以形成模板，只是在其中有細(xì)微變化，比如：樣式會(huì)多樣化、功能會(huì)復(fù)雜化。現(xiàn)在我們寫一個(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>

　　第二步：打開選擇器時(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,
　　})
　　},

　　第三步：在選擇的過程中，選擇器有個(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è)樣式的小問題：如選中行背景色寫在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：

　　/**
　　*頁面的初始數(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&lt;=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=&gt;o==parseInt(txtDate.slice(0,txtDate.indexOf('-'))));//年份下標(biāo)
　　var monthIndex=monthList.findIndex(o=&gt;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=&gt;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&lt;=2050;i++){//年份
　　yearList.push(i);
　　}
　　for(var i=1;i&lt;=12;i++){//月份
　　monthList.push(i);
　　}
　　var myDate=new Date();
　　var currentYearIndex=yearList.findIndex(o=&gt;o==myDate.getFullYear());
　　var currentMonthIndex=monthList.findIndex(o=&gt;o==myDate.getMonth()+1);
　　var dayList=that.getDayList(currentYearIndex,currentMonthIndex);//天
　　var currentDayIndex=dayList.findIndex(o=&gt;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)前時(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 */

　　以上就是全部內(nèi)容，開始自己設(shè)計(jì)一個(gè)吧。

云服務(wù)器 GPU云服務(wù)器微信小程序?qū)嵗?/a> 微信小程序怎么使用怎樣使用微信小程序如何使用微信小程序

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/128376.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

3403771864

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

匯總有關(guān)JS對(duì)象的創(chuàng)建與繼承

閱讀 596·2023-03-27 18:33
小程序有關(guān)手寫板簽名具體代碼

閱讀 789·2023-03-26 17:27
剖析Vue3中偵聽器watch的使用教程

閱讀 684·2023-03-26 17:14
JavaScript取消請(qǐng)求有哪些方法

閱讀 644·2023-03-17 21:13
解析React SSR 中的限流案例

閱讀 572·2023-03-17 08:28
解析微信小程序如何實(shí)現(xiàn)日期范圍選擇

閱讀 1887·2023-02-27 22:32
講解Web Components實(shí)現(xiàn)類Element UI中的Card卡片

閱讀 1371·2023-02-27 22:27
JavaScript使用export和import的兩個(gè)報(bào)錯(cuò)如何解決

閱讀 2271·2023-01-20 08:28

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

微信小程序日期選擇器使用實(shí)例

相關(guān)文章

**如何寫一個(gè)微信小程序組件**

微信小程序里碰到的坑和小知識(shí)

微信小程序里碰到的坑和小知識(shí)

微信小程序picker組件遇到的問題與解決方案

發(fā)表評(píng)論

0條評(píng)論

3403771864

男|高級(jí)講師

TA的文章

匯總有關(guān)JS對(duì)象的創(chuàng)建與繼承

小程序有關(guān)手寫板簽名具體代碼

剖析Vue3中偵聽器watch的使用教程

JavaScript取消請(qǐng)求有哪些方法

解析React SSR 中的限流案例

解析微信小程序如何實(shí)現(xiàn)日期范圍選擇

講解Web Components實(shí)現(xiàn)類Element UI中的Card卡片

JavaScript使用export和import的兩個(gè)報(bào)錯(cuò)如何解決

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

微信小程序日期選擇器使用實(shí)例

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！