这里写自定义目录标题
微信小程序--多种类型日期选择器（年月、月日...）
时间选择器（年月日）
时间选择器（年月）
时间选择器（年）
时间选择器（月日）
时间选择器（月）
时间选择器（日）
微信小程序–多种类型日期选择器（年月、月日…）
在业务开发的过程中，有许多对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;}