这里写自定义目录标题
微信小程序--多种类型日期选择器（年月、月日...）
时间选择器（年月日）
时间选择器（年月）
时间选择器（年）
时间选择器（月日）
时间选择器（月）
时间选择器（日）
微信小程序–多种类型日期选择器（年月、月日…）
在业务开发的过程中，有许多对picker选择器的使用场景，根据开发需要列出了几种常见的类型，可供大家共同参考、学习
时间选择器（年月日）
效果图：
wxml：
<picker mode="date" header-text="选择时间" value="{{date}}" bindchange="bindDateChange"> <view class="font30"> <text class="color3">填报时间：</text> <text class="color6">{{date}}</text> <text class="timeIcon">▼</text> </view></picker>js
data:{ date:'2021-01-01',},bindDateChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ date: e.detail.value })},wxss
.font30{ font-size: 30rpx;}.color3{ color: #333;}.color6{ color: #666;}.timeIcon{ color:#666; font-size:18rpx; margin-left: 5rpx;}时间选择器（年月）
效果图：
wxml：
<picker mode="date" header-text="选择时间" fields="month" value="{{date}}" bindchange="bindDateChange"> <view class="font30"> <text class="color3">填报时间：</text> <text class="color6">{{date}}</text> <text class="timeIcon">▼</text> </view></picker>js
data:{ date:'2021-01',},bindDateChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ date: e.detail.value })},wxss
.font30{ font-size: 30rpx;}.color3{ color: #333;}.color6{ color: #666;}.timeIcon{ color:#666; font-size:18rpx; margin-left: 5rpx;}时间选择器（年）
wxml：
<picker mode="date" header-text="选择时间" fields="year" value="{{date}}" bindchange="bindDateChange"> <view class="font30"> <text class="color3">填报时间：</text> <text class="color6">{{date}}</text> <text class="timeIcon">▼</text> </view></picker>js
data:{ date:'2021',},bindDateChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ date: e.detail.value })},wxss
.font30{ font-size: 30rpx;}.color3{ color: #333;}.color6{ color: #666;}.timeIcon{ color:#666; font-size:18rpx; margin-left: 5rpx;}时间选择器（月日）
(转载文章 如有雷同 纯属巧合）
这个官方没有给案例 只能自己自定义一个component组件（datePicker）
datePicker.wxml：
<view class='modal-mask' wx:if="{{ showDatePickerPlus }}" bindtap='closeDatePickerPlus'></view><view class='datepicker' wx:if="{{ showDatePickerPlus }}" animation="{{animationData}}"> <view class='datepicker-header'> <view class='datepicker-header-left' bindtap='closeDatePickerPlus'>取消</view> <view class='datepicker-header-right' bindtap='submitSelectDate'>确定</view> </view> <view class='datepicker-content'> <picker-view value="{{glDateNoYearMutiIndex}}" bindchange="bindDateGlNoYear"> <picker-view-column class="picker-view-column"> <view wx:for="{{glMonthsNoYear}}" wx:key="index">{{item}}月</view> </picker-view-column> <picker-view-column class="picker-view-column"> <view wx:for="{{glDaysNoYear}}" wx:key="index">{{item}}日</view> </picker-view-column> </picker-view> </view></view>datePicker.js：
// component/DatePicker/DatePicker.js// 公历日期 1900年 - 今天const glYear = [];for (let i = 1900; i <= 2049; i++) { glYear.push(i)}// 公历月份const glMonth = [];for (let i = 1; i <= 12; i++) { glMonth.push(i < 10 ? ('0' + i) : i)}// 公历天份 28天const glDay28 = [];for (let i = 1; i <= 28; i++) { glDay28.push(i < 10 ? ('0' + i) : i)}// 公历天份 29天const glDay29 = [];for (let i = 1; i <= 29; i++) { glDay29.push(i < 10 ? ('0' + i) : i)}// 公历天份 30天const glDay30 = [];for (let i = 1; i <= 30; i++) { glDay30.push(i < 10 ? ('0' + i) : i)}// 公历天份 31天const glDay31 = [];for (let i = 1; i <= 31; i++) { glDay31.push(i < 10 ? ('0' + i) : i)}/** * 公历年月日处理 */function glDateHandler(arr) { let indexArr = arr let data = { "yearCol": glYear, "monthCol": glMonth, "dayCol": [] } if (arr[1] == 0 || arr[1] == 2 || arr[1] == 4 || arr[1] == 6 || arr[1] == 7 || arr[1] == 9 || arr[1] == 11) data.dayCol = glDay31 else if (arr[1] != 1) data.dayCol = glDay30 else { let year = glYear[arr[0]]; data.dayCol = glDay28; // 判断闰年 if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) { data.dayCol = glDay29; } } return data;}/** * 公历月日处理 不带年份 */function glDateHandlerNoYear(arr) { let indexArr = arr let data = { "monthCol": [], "dayCol": [] } data.monthCol = glMonth if (arr[0] == 0 || arr[0] == 2 || arr[0] == 4 || arr[0] == 6 || arr[0] == 7 || arr[0] == 9 || arr[0] == 11) data.dayCol = glDay31 else if (arr[0] != 1) data.dayCol = glDay30 else data.dayCol = glDay29 return data;}const formatTime = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() return [year, month, day].map(formatNumber).join('-')}const formatNumber = n => { n = n.toString() return n[1] ? n : '0' + n}Component({ behaviors: [], properties: { // 控制是否显示日期选择组件的flag showDatePickerPlus: { type: Boolean, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） value: false, // 属性初始值（可选），如果未指定则会根据类型选择一个 // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange' observer: function (newVal, oldVal) { if (newVal != oldVal) { if (newVal) this.showDatePickerPlus() else this.closeDatePickerPlus() } } }, initDate: { type: String, value: formatTime(new Date()) } }, // 私有数据，可用于模版渲染 data: { glDateMutiIndex: [90, 0, 0], glDateNoYearMutiIndex: [0, 0], glYears: [], glMonths: [], glMonthsNoYear: [], glDays: [], glDaysNoYear: [], animationData: {},// 动画 showDatePickerPlus: false, }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { /** * 初始化阴阳历数据 */ let glDateMutiIndex = this.data.glDateMutiIndex; let glDateNoYearMutiIndex = this.data.glDateNoYearMutiIndex; let [y,m,d] = this.data.initDate.split('-'); glDateMutiIndex = [glYear.indexOf(parseInt(y)), parseInt(m) - 1, parseInt(d) - 1]; let glDate = glDateHandler(glDateMutiIndex); glDateNoYearMutiIndex = [parseInt(m) - 1, parseInt(d) - 1]; let glDateNoYear = glDateHandlerNoYear(glDateNoYearMutiIndex); this.setData({ glDateMutiIndex: glDateMutiIndex, glDateNoYearMutiIndex: glDateNoYearMutiIndex, glYears: glDate.yearCol, glMonths: glDate.monthCol, glDays: glDate.dayCol, glMonthsNoYear: glDateNoYear.monthCol, glDaysNoYear: glDateNoYear.dayCol, }) }, moved: function () { }, detached: function () { }, methods: { /** * 公历数据改变监听 */ bindDateGl: function (e) { let value = e.detail.value; let data = glDateHandler(value); this.setData({ glDateMutiIndex: value, glYears: data.yearCol, glMonths: data.monthCol, glDays: data.dayCol, }) }, /** * 公历不带年份数据改变监听 */ bindDateGlNoYear: function (e) { let value = e.detail.value; let data = glDateHandlerNoYear(value); this.setData({ glDateNoYearMutiIndex: value, glMonthsNoYear: data.monthCol, glDaysNoYear: data.dayCol }) }, /** * 选择日期->确定 */ submitSelectDate: function () { let date = ''; date = (this.data.glMonths[this.data.glDateNoYearMutiIndex[0]] + '-' + this.data.glDaysNoYear[this.data.glDateNoYearMutiIndex[1]]) this.closeDatePickerPlus(); var myEventDetail = { dateStr: date, } // detail对象，提供给事件监听函数 var myEventOption = {} // 触发事件的选项 this.triggerEvent('submit', myEventDetail, myEventOption) }, // 显示日期选择控件 showDatePickerPlus: function () { var animation = wx.createAnimation({ duration: 160, timingFunction: 'linear', delay: 0 }) this.animation = animation animation.translateY(280).step({duration: 0}) this.setData({ animationData: animation.export(), showDatePickerPlus: true }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export(), }) }.bind(this), 160) }, // 隐藏日期选择控件 closeDatePickerPlus: function () { this.animation.translateY(280).step() this.setData({ animationData: this.animation.export(), }) setTimeout(function () { this.setData({ showDatePickerPlus: false, }) }.bind(this), 120) }, onMyButtonTap: function () { this.setData({ // 更新属性和数据的方法与更新页面数据的方法类似 }) }, _propertyChange: function (newVal, oldVal) { } }})datePicker.JSON：
{ "component": true, "usingComponents": {}}/* component/DatePicker/DatePicker.wxss *//* 日期选择器 */.modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.3; overflow: hidden; z-index: 500; color: #fff;}.datepicker { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; z-index: 501;}.datepicker-header { display: flex; height: 80rpx; background-color: #e9e9e9; color: #2f80f2; align-items: center; justify-content: space-between; font-size: 28rpx;}.datepicker-header-left { height: 100%; margin-left: 30rpx; display: flex; align-items: center;}.datepicker-header-right { margin-right: 40rpx;}.datetype-toggle { background: #fff; border: 1rpx solid #2f80f2; display: flex; margin-right: 50rpx;}.datetype-item { width: 80rpx; height: 50rpx; display: flex; align-items: center; justify-content: center;}.datetype-select { background: #2f80f2; color: #fff;}.datepicker-content { height: 100%;}picker-view { width: 100%; height: 480rpx;}.picker-view-column { text-align:center; line-height: 80rpx; color: #222; font-size: 28rpx;}index.wxml
<view class="font30 holidaysTime" bindtap='showDatePickerPlus'> <text class="color3">选择时间：</text> <text class="color6">{{dateInfo.dateStr}}</text> <text class="timeIcon">▼</text> <datepicker-plus bind:submit='submit' showDatePickerPlus='{{show}}' initDate="2018-01-01"></datepicker-plus></view>index.js
data:{ show: false, dateInfo: {dateStr:'01-01'}},submit: function(e) { console.log(e); console.log('日期字符串：' + e.detail.dateStr) this.setData({ dateInfo: e.detail }) console.log('dateInfo',e.detail);},showDatePickerPlus: function() { this.setData({ show: true })},index.JSON
"usingComponents": { "datepicker-plus": "/component/DatePicker/DatePicker"},index.WXSS
.holidaysTime{ margin-bottom: 60rpx;}.font30{ font-size: 30rpx;}.color3{ color: #333;}.color6{ color: #666;}.timeIcon{ color:#666; font-size:18rpx; margin-left: 5rpx;}时间选择器（月）
效果图：
wxml：
<picker bindchange="bindPickerdateChange" value="{{index}}" range="{{monthArr}}"> <view class="font30"> <text class="color3 margin10">月份</text> <text class="color6">{{monthArr[index]}}</text> <text class="color6 timeIcon">▼</text> </view></picker>js
data:{ index:0, monthArr:['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月'],},bindDateChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ date: e.detail.value })},wxss
.font30{ font-size: 30rpx;}.color3{ color: #333;}.color6{ color: #666;}.timeIcon{ color:#666; font-size:18rpx; margin-left: 5rpx;}时间选择器（日）
效果图：
wxml：
<picker bindchange="bindPickerdateChange" value="{{index}}" range="{{dayArr}}"> <view class="font30"> <text class="color3 margin10">日期</text> <text class="color6">{{dayArr[index]}}</text> <text class="color6 timeIcon">▼</text> </view></picker>js
data:{ index:0, dayArr:['01日','02日','03日','04日','05日','06日','07日','08日','09日','10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','20日','21日'],},bindPickerdateChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ index: e.detail.value })},wxss
.font30{ font-size: 30rpx;}.color3{ color: #333;}.color6{ color: #666;}.timeIcon{ color:#666; font-size:18rpx; margin-left: 5rpx;}