devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序--多种类型日期选择器（年月、月日...）_微信小程序时间筛选

作者：IT小白 | 2024-03-25 03:05:03

赞

踩

微信小程序时间筛选

这里写自定义目录标题
微信小程序--多种类型日期选择器（年月、月日...）
时间选择器（年月日）
时间选择器（年月）
时间选择器（年）
时间选择器（月日）
时间选择器（月）
时间选择器（日）
微信小程序–多种类型日期选择器（年月、月日…）
在业务开发的过程中，有许多对picker选择器的使用场景，根据开发需要列出了几种常见的类型，可供大家共同参考、学习

时间选择器（年月日）
效果图：

wxml：

  1. <picker mode="date" header-text="选择时间"  value="{{date}}" bindchange="bindDateChange">
  2.   <view class="font30">
  3.     <text class="color3">填报时间：</text>
  4.     <text class="color6">{{date}}</text>
  5.     <text class="timeIcon">▼</text>
  6.   </view>
  7. </picker>

js

  1. data:{
  2.   date:'2021-01-01',
  3. },
  4. bindDateChange: function(e) {
  5.   console.log('picker发送选择改变，携带值为', e.detail.value)
  6.   this.setData({
  7.     date: e.detail.value
  8.   })
  9. },

wxss

  1. .font30{
  2.   font-size: 30rpx;
  3. }
  4.  
  5. .color3{
  6.   color: #333;
  7. }
  8.  
  9. .color6{
  10.   color: #666;
  11. }
  12.  
  13. .timeIcon{
  14.   color:#666;
  15.   font-size:18rpx;
  16.   margin-left: 5rpx;
  17. }
  18.

时间选择器（年月）

效果图：

wxml：

  1. <picker mode="date" header-text="选择时间" fields="month" value="{{date}}" bindchange="bindDateChange">
  2.   <view class="font30">
  3.     <text class="color3">填报时间：</text>
  4.     <text class="color6">{{date}}</text>
  5.     <text class="timeIcon">▼</text>
  6.   </view>
  7. </picker>

js

  1. data:{
  2.   date:'2021-01',
  3. },
  4. bindDateChange: function(e) {
  5.   console.log('picker发送选择改变，携带值为', e.detail.value)
  6.   this.setData({
  7.     date: e.detail.value
  8.   })
  9. },

wxss

  1. .font30{
  2.   font-size: 30rpx;
  3. }
  4.  
  5. .color3{
  6.   color: #333;
  7. }
  8.  
  9. .color6{
  10.   color: #666;
  11. }
  12.  
  13. .timeIcon{
  14.   color:#666;
  15.   font-size:18rpx;
  16.   margin-left: 5rpx;
  17. }
  18.

时间选择器（年）

wxml：

  1. <picker mode="date" header-text="选择时间" fields="year" value="{{date}}" bindchange="bindDateChange">
  2.   <view class="font30">
  3.     <text class="color3">填报时间：</text>
  4.     <text class="color6">{{date}}</text>
  5.     <text class="timeIcon">▼</text>
  6.   </view>
  7. </picker>

js

  1. data:{
  2.   date:'2021',
  3. },
  4. bindDateChange: function(e) {
  5.   console.log('picker发送选择改变，携带值为', e.detail.value)
  6.   this.setData({
  7.     date: e.detail.value
  8.   })
  9. },

wxss

  1. .font30{
  2.   font-size: 30rpx;
  3. }
  4.  
  5. .color3{
  6.   color: #333;
  7. }
  8.  
  9. .color6{
  10.   color: #666;
  11. }
  12.  
  13. .timeIcon{
  14.   color:#666;
  15.   font-size:18rpx;
  16.   margin-left: 5rpx;
  17. }
  18.

时间选择器（月日）

(转载文章 如有雷同 纯属巧合）

这个官方没有给案例 只能自己自定义一个component组件（datePicker）

datePicker.wxml：

  1. <view class='modal-mask' wx:if="{{ showDatePickerPlus }}" bindtap='closeDatePickerPlus'></view>
  2. <view class='datepicker' wx:if="{{ showDatePickerPlus }}" animation="{{animationData}}">
  3.   <view class='datepicker-header'>
  4.     <view class='datepicker-header-left'  bindtap='closeDatePickerPlus'>取消</view>
  5.     <view class='datepicker-header-right' bindtap='submitSelectDate'>确定</view>
  6.   </view>
  7.   <view class='datepicker-content'>
  8.     <picker-view value="{{glDateNoYearMutiIndex}}" bindchange="bindDateGlNoYear">
  9.       <picker-view-column class="picker-view-column">
  10.         <view wx:for="{{glMonthsNoYear}}" wx:key="index">{{item}}月</view>
  11.       </picker-view-column>
  12.       <picker-view-column class="picker-view-column">
  13.         <view wx:for="{{glDaysNoYear}}" wx:key="index">{{item}}日</view>
  14.       </picker-view-column>
  15.     </picker-view>
  16.   </view>
  17. </view>

datePicker.js：

  1. // component/DatePicker/DatePicker.js
  2.  
  3. // 公历日期 1900年 - 今天
  4. const glYear = [];
  5. for (let i = 1900; i <= 2049; i++) {
  6.     glYear.push(i)
  7. }
  8. // 公历月份
  9. const glMonth = [];
  10. for (let i = 1; i <= 12; i++) {
  11.     glMonth.push(i < 10 ? ('0' + i) : i)
  12. }
  13. // 公历天份 28天
  14. const glDay28 = [];
  15. for (let i = 1; i <= 28; i++) {
  16.     glDay28.push(i < 10 ? ('0' + i) : i)
  17. }
  18. // 公历天份 29天
  19. const glDay29 = [];
  20. for (let i = 1; i <= 29; i++) {
  21.     glDay29.push(i < 10 ? ('0' + i) : i)
  22. }
  23. // 公历天份 30天
  24. const glDay30 = [];
  25. for (let i = 1; i <= 30; i++) {
  26.     glDay30.push(i < 10 ? ('0' + i) : i)
  27. }
  28. // 公历天份 31天
  29. const glDay31 = [];
  30. for (let i = 1; i <= 31; i++) {
  31.     glDay31.push(i < 10 ? ('0' + i) : i)
  32. }
  33.  
  34. /**
  35.  * 公历年月日处理
  36.  */
  37. function glDateHandler(arr) {
  38.     let indexArr = arr
  39.     let data = {
  40.         "yearCol": glYear,
  41.         "monthCol": glMonth,
  42.         "dayCol": []
  43.     }
  44.     if (arr[1] == 0 || arr[1] == 2 || arr[1] == 4 || arr[1] == 6 || arr[1] == 7 || arr[1] == 9 || arr[1] == 11)
  45.         data.dayCol = glDay31
  46.     else if (arr[1] != 1)
  47.         data.dayCol = glDay30
  48.     else {
  49.         let year = glYear[arr[0]];
  50.         data.dayCol = glDay28;
  51.         // 判断闰年
  52.         if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
  53.             data.dayCol = glDay29;
  54.         }
  55.     }
  56.     return data;
  57. }
  58.  
  59.  
  60. /**
  61.  * 公历月日处理 不带年份
  62.  */
  63. function glDateHandlerNoYear(arr) {
  64.     let indexArr = arr
  65.     let data = {
  66.         "monthCol": [],
  67.         "dayCol": []
  68.     }
  69.     data.monthCol = glMonth
  70.     if (arr[0] == 0 || arr[0] == 2 || arr[0] == 4 || arr[0] == 6 || arr[0] == 7 || arr[0] == 9 || arr[0] == 11)
  71.         data.dayCol = glDay31
  72.     else if (arr[0] != 1)
  73.         data.dayCol = glDay30
  74.     else
  75.         data.dayCol = glDay29
  76.     return data;
  77. }
  78.  
  79. const formatTime = date => {
  80.     const year = date.getFullYear()
  81.     const month = date.getMonth() + 1
  82.     const day = date.getDate()
  83.     return [year, month, day].map(formatNumber).join('-')
  84. }
  85.  
  86. const formatNumber = n => {
  87.     n = n.toString()
  88.     return n[1] ? n : '0' + n
  89. }
  90.  
  91. Component({
  92.   behaviors: [],
  93.   properties: {
  94.       // 控制是否显示日期选择组件的flag
  95.       showDatePickerPlus: {
  96.           type: Boolean, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
  97.           value: false, // 属性初始值（可选），如果未指定则会根据类型选择一个
  98.           // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
  99.           observer: function (newVal, oldVal) {
  100.               if (newVal != oldVal) {
  101.                   if (newVal)
  102.                       this.showDatePickerPlus()
  103.                   else
  104.                       this.closeDatePickerPlus()
  105.               }
  106.           }
  107.       },
  108.       initDate: {
  109.           type: String,
  110.           value: formatTime(new Date())
  111.       }
  112.   },
  113.   // 私有数据，可用于模版渲染
  114.   data: {
  115.       glDateMutiIndex: [90, 0, 0],
  116.       glDateNoYearMutiIndex: [0, 0],
  117.       glYears: [],
  118.       glMonths: [],
  119.       glMonthsNoYear: [],
  120.       glDays: [],
  121.       glDaysNoYear: [],
  122.       animationData: {},// 动画
  123.       showDatePickerPlus: false,
  124.   },
  125.  
  126.   // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  127.   attached: function () {
  128.       /**
  129.        * 初始化阴阳历数据
  130.        */
  131.       let glDateMutiIndex = this.data.glDateMutiIndex;
  132.       let glDateNoYearMutiIndex = this.data.glDateNoYearMutiIndex;
  133.       let [y,m,d] = this.data.initDate.split('-');
  134.       glDateMutiIndex = [glYear.indexOf(parseInt(y)), parseInt(m) - 1, parseInt(d) - 1];
  135.       let glDate = glDateHandler(glDateMutiIndex);
  136.       glDateNoYearMutiIndex = [parseInt(m) - 1, parseInt(d) - 1];
  137.       let glDateNoYear = glDateHandlerNoYear(glDateNoYearMutiIndex);
  138.       this.setData({
  139.           glDateMutiIndex: glDateMutiIndex,
  140.           glDateNoYearMutiIndex: glDateNoYearMutiIndex,
  141.           glYears: glDate.yearCol,
  142.           glMonths: glDate.monthCol,
  143.           glDays: glDate.dayCol,
  144.           glMonthsNoYear: glDateNoYear.monthCol,
  145.           glDaysNoYear: glDateNoYear.dayCol,
  146.       })
  147.   },
  148.   moved: function () {
  149.   },
  150.   detached: function () {
  151.   },
  152.  
  153.   methods: {
  154.       /**
  155.        * 公历数据改变监听
  156.        */
  157.       bindDateGl: function (e) {
  158.           let value = e.detail.value;
  159.           let data = glDateHandler(value);
  160.           this.setData({
  161.               glDateMutiIndex: value,
  162.               glYears: data.yearCol,
  163.               glMonths: data.monthCol,
  164.               glDays: data.dayCol,
  165.           })
  166.       },
  167.       /**
  168.        * 公历不带年份数据改变监听
  169.        */
  170.       bindDateGlNoYear: function (e) {
  171.           let value = e.detail.value;
  172.           let data = glDateHandlerNoYear(value);
  173.           this.setData({
  174.               glDateNoYearMutiIndex: value,
  175.               glMonthsNoYear: data.monthCol,
  176.               glDaysNoYear: data.dayCol
  177.           })
  178.       },
  179.       /**
  180.        * 选择日期->确定
  181.        */
  182.       submitSelectDate: function () {
  183.           let date = '';
  184.           date = (this.data.glMonths[this.data.glDateNoYearMutiIndex[0]] + '-' + this.data.glDaysNoYear[this.data.glDateNoYearMutiIndex[1]])
  185.           
  186.           this.closeDatePickerPlus();
  187.           var myEventDetail = {
  188.               dateStr: date,
  189.           } // detail对象，提供给事件监听函数
  190.           var myEventOption = {} // 触发事件的选项
  191.           this.triggerEvent('submit', myEventDetail, myEventOption)
  192.       },
  193.       // 显示日期选择控件
  194.       showDatePickerPlus: function () {
  195.           var animation = wx.createAnimation({
  196.               duration: 160,
  197.               timingFunction: 'linear',
  198.               delay: 0
  199.           })
  200.           this.animation = animation
  201.  
  202.           animation.translateY(280).step({duration: 0})
  203.  
  204.           this.setData({
  205.               animationData: animation.export(),
  206.               showDatePickerPlus: true
  207.           })
  208.           setTimeout(function () {
  209.               animation.translateY(0).step()
  210.               this.setData({
  211.                   animationData: animation.export(),
  212.               })
  213.           }.bind(this), 160)
  214.       },
  215.       // 隐藏日期选择控件
  216.       closeDatePickerPlus: function () {
  217.           this.animation.translateY(280).step()
  218.           this.setData({
  219.               animationData: this.animation.export(),
  220.           })
  221.           setTimeout(function () {
  222.               this.setData({
  223.                   showDatePickerPlus: false,
  224.               })
  225.           }.bind(this), 120)
  226.       },
  227.       onMyButtonTap: function () {
  228.           this.setData({
  229.               // 更新属性和数据的方法与更新页面数据的方法类似
  230.           })
  231.       },
  232.       _propertyChange: function (newVal, oldVal) {
  233.  
  234.       }
  235.   }
  236.  
  237. })
  238.

datePicker.JSON：

  1. {
  2.   "component": true,
  3.   "usingComponents": {}
  4. }
  1. /* component/DatePicker/DatePicker.wxss */
  2. /* 日期选择器 */
  3. .modal-mask {
  4.   width: 100%;
  5.   height: 100%;
  6.   position: fixed;
  7.   top: 0;
  8.   left: 0;
  9.   background: #000;
  10.   opacity: 0.3;
  11.   overflow: hidden;
  12.   z-index: 500;
  13.   color: #fff;
  14. }
  15. .datepicker {
  16.   position: fixed;
  17.   bottom: 0;
  18.   left: 0;
  19.   width: 100%;
  20.   background: #fff;
  21.   z-index: 501;
  22. }
  23. .datepicker-header {
  24.   display: flex;
  25.   height: 80rpx;
  26.   background-color: #e9e9e9;
  27.   color: #2f80f2;
  28.   align-items: center;
  29.   justify-content: space-between;
  30.   font-size: 28rpx;
  31. }
  32. .datepicker-header-left {
  33.   height: 100%;
  34.   margin-left: 30rpx;
  35.   display: flex;
  36.   align-items: center;
  37. }
  38. .datepicker-header-right {
  39.   margin-right: 40rpx;
  40. }
  41. .datetype-toggle {
  42.   background: #fff;
  43.   border: 1rpx solid #2f80f2;
  44.   display: flex;
  45.   margin-right: 50rpx;
  46. }
  47. .datetype-item {
  48.   width: 80rpx;
  49.   height: 50rpx;
  50.   display: flex;
  51.   align-items: center;
  52.   justify-content: center;
  53. }
  54. .datetype-select {
  55.   background: #2f80f2;
  56.   color: #fff;
  57. }
  58. .datepicker-content {
  59.   height: 100%;
  60. }
  61. picker-view {
  62.   width: 100%; 
  63.   height: 480rpx;
  64. }
  65. .picker-view-column {
  66.   text-align:center;
  67.   line-height: 80rpx;
  68.   color: #222;
  69.   font-size: 28rpx;
  70. }

index.wxml

  1. <view class="font30 holidaysTime" bindtap='showDatePickerPlus'>
  2.   <text class="color3">选择时间：</text>
  3.   <text class="color6">{{dateInfo.dateStr}}</text>
  4.   <text class="timeIcon">▼</text>
  5.   <datepicker-plus bind:submit='submit' showDatePickerPlus='{{show}}' initDate="2018-01-01"></datepicker-plus>
  6. </view>

index.js

  1. data:{
  2.   show: false,
  3.   dateInfo: {dateStr:'01-01'}
  4. },
  5. submit: function(e) {
  6.   console.log(e);
  7.   console.log('日期字符串：' + e.detail.dateStr)
  8.   this.setData({
  9.     dateInfo: e.detail
  10.   })
  11.   console.log('dateInfo',e.detail);
  12. },
  13. showDatePickerPlus: function() {
  14.   this.setData({
  15.     show: true
  16.   })
  17. },
  18.

index.JSON

  1. "usingComponents": {
  2.   "datepicker-plus": "/component/DatePicker/DatePicker"
  3. },

index.WXSS

  1. .holidaysTime{
  2.   margin-bottom: 60rpx;
  3. }
  4. .font30{
  5.   font-size: 30rpx;
  6. }
  7.  
  8. .color3{
  9.   color: #333;
  10. }
  11.  
  12. .color6{
  13.   color: #666;
  14. }
  15.  
  16. .timeIcon{
  17.   color:#666;
  18.   font-size:18rpx;
  19.   margin-left: 5rpx;
  20. }
  21.

时间选择器（月）

效果图：

wxml：

  1. <picker bindchange="bindPickerdateChange" value="{{index}}" range="{{monthArr}}">
  2.   <view class="font30">
  3.     <text class="color3 margin10">月份</text>
  4.     <text class="color6">{{monthArr[index]}}</text>
  5.     <text class="color6 timeIcon">▼</text>
  6.   </view>
  7. </picker>

js

  1. data:{
  2.    index:0,
  3.    monthArr:['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月'],
  4. },
  5. bindDateChange: function(e) {
  6.   console.log('picker发送选择改变，携带值为', e.detail.value)
  7.   this.setData({
  8.     date: e.detail.value
  9.   })
  10. },

wxss

  1. .font30{
  2.   font-size: 30rpx;
  3. }
  4.  
  5. .color3{
  6.   color: #333;
  7. }
  8.  
  9. .color6{
  10.   color: #666;
  11. }
  12.  
  13. .timeIcon{
  14.   color:#666;
  15.   font-size:18rpx;
  16.   margin-left: 5rpx;
  17. }
  18.

时间选择器（日）

效果图：

wxml：

  1. <picker bindchange="bindPickerdateChange" value="{{index}}" range="{{dayArr}}">
  2.   <view class="font30">
  3.     <text class="color3 margin10">日期</text>
  4.     <text class="color6">{{dayArr[index]}}</text>
  5.     <text class="color6 timeIcon">▼</text>
  6.   </view>
  7. </picker>

js

  1. data:{
  2.    index:0,
  3.    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日'],
  4. },
  5.  
  6. bindPickerdateChange: function(e) {
  7.   console.log('picker发送选择改变，携带值为', e.detail.value)
  8.   this.setData({
  9.     index: e.detail.value
  10.   })
  11. },

wxss

  1. .font30{
  2.   font-size: 30rpx;
  3. }
  4.  
  5. .color3{
  6.   color: #333;
  7. }
  8.  
  9. .color6{
  10.   color: #666;
  11. }
  12.  
  13. .timeIcon{
  14.   color:#666;
  15.   font-size:18rpx;
  16.   margin-left: 5rpx;
  17. }
  18.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/306573
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号