您现在的位置是：网站首页> 编程资料编程资料
微信小程序日期选择器使用详解_javascript技巧_
2023-05-24
391人已围观
简介 微信小程序日期选择器使用详解_javascript技巧_
本文实例为大家分享了微信小程序日期选择器的具体代码，供大家参考，具体内容如下
需求：在小程序开发中，时常会遇到日期选择器、时间选择器或者地区选择器来进行选择的功能。往往设计图上面并不是按部就班沿用官方提供那种控件样式来实现显示，比如：样式会多样化、功能会复杂化。这时我们就要自己写一个适合需求的组件。
下面跟大家分享下我写的一个自定义日期选择器组件
首先上效果图看看:
主要步骤：
第一步：首先自定义选择器组件需要用到picker-view跟picker-view-column。使用方法如下~
{{item}}年 {{item}}月 {{item}}日
第二步：打开选择器时就要获取到当前的年月日，我这里使用了for遍历直接生成年份数组跟月份数组。注：天数根据年份跟月份动态生成
//獲取當前日期 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, }) },第三步：在选择的过程中，选择器有个改变事件，当年份或者月份改变的时候，天数要随之变化
//日期选择改变事件 bindChangeDate: function (e) { var that = this; var pickerColumnList = e.detail.value; that.setData({ dayList: that.getDayList(pickerColumnList[0], pickerColumnList[1]), pickerIndexList: pickerColumnList, }) },有个样式的小问题：如选中行背景色写在picker-view控件中，则会出现滚动时背景色也会随着动，体验不好。所以我这里写了一个占位符，设置背景色，滚动选择时背景色就不会受到影响
下面是全部代码~~
wxml：
{{item}}年 {{item}}月 {{item}}日
js：
/** * 页面的初始数据 */ data: { pickerIndexList: [0, 0, 0],//日期选择器下标 isShowDateLayer: false,//是否显示日期弹层 txtDate: '請选择提貨日期',//选中日期 isSeltDate: false,//是否选择日期 }, // 截获竖向滑动 catchTouchMove: function (res) { return true; }, //获取天数列表 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; }, //获取天数 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('-'))));//年份下标 var monthIndex = monthList.findIndex(o => o == parseInt(txtDate.slice(txtDate.indexOf('-') + 1, txtDate.lastIndexOf('-'))));//月份下标 var dayList = that.getDayList(yearIndex, monthIndex);//天数 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) { }, //獲取當前日期 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, }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; that.getCurrentDate();//獲取當前時間 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-bott
相关内容
- 微信小程序获取用户手机号码的详细步骤_javascript技巧_
- vue3集成Element-plus实现按需自动引入组件的方法总结_vue.js_
- 多版本node的安装和切换详细操作步骤_node.js_
- uniapp地图组件(map)使用与遇到的一些问题总结_javascript技巧_
- uniapp微信小程序自定义导航栏的全过程_javascript技巧_
- vue表单验证rules及validator验证器的使用方法实例_vue.js_
- JavaScript本地存储实现用户名存储案例_javascript技巧_
- VUE跨域详解以及常用解决跨域的方法_vue.js_
- vue使用element实现上传图片和修改图片功能_vue.js_
- vue导入处理Excel表格功能步骤详解_vue.js_
点击排行
本栏推荐
