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

微信小程序自定义日期选择器组件_微信小程序日期时间选择器

作者：Gausst松鼠会 | 2024-03-25 03:00:54

赞

踩

微信小程序日期时间选择器

效果图 

  • 默认开始时间为当天
  • 最大结束时间为当天
  • 默认结束时间为开始时间的10后

wxml 

  1. <view class="container">
  2.   <view class="page-body">
  3.     <view class="selected-date" id='1' bindtap="btnTap" class="second_1_1 {{btn_type=='1'?'second_1_2':''}}">{{year}}年{{month}}月{{day}}日{{hour}}时{{minute}}分</view>
  4.         <view class="selected-date"  id='2' bindtap="btnTap" class="second_1_1 {{btn_type=='2'?'second_1_2':''}}">{{year2}}年{{month2}}月{{day2}}日{{hour2}}时{{minute2}}分</view>
  5.     <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}"  bindchange="bindChange" id='1' wx:if="{{btn_type==1}}">
  6.       <picker-view-column>
  7.         <view wx:for="{{years}}" wx:key="{{years}}" style="line-height: 50px; text-align: center;" wx:key="years">{{item}}年</view>
  8.       </picker-view-column>
  9.       <picker-view-column>
  10.         <view wx:for="{{months}}" wx:key="{{months}}" style="line-height: 50px; text-align: center;"wx:key="months">{{item}}月</view>
  11.       </picker-view-column>
  12.       <picker-view-column>
  13.         <view wx:for="{{days}}" wx:key="{{days}}" style="line-height: 50px; text-align: center;" wx:key="days">{{item}}日</view>
  14.       </picker-view-column>
  15.   
  16.      <picker-view-column>
  17.  
  18.           <view wx:for="{{hours}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}时</view>
  19.         </picker-view-column>
  20.           <picker-view-column>
  21.           <view wx:for="{{minutes}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}分</view>
  22.         </picker-view-column>
  23.     </picker-view >
  24.        <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value2}}" bindchange="bindChange2" id='2' wx:else>
  25.       <picker-view-column>
  26.         <view wx:for="{{years2}}" wx:key="{{years2}}" style="line-height: 50px; text-align: center;" wx:key="years2">{{item}}年</view>
  27.       </picker-view-column>
  28.       <picker-view-column>
  29.         <view wx:for="{{months2}}" wx:key="{{months2}}" style="line-height: 50px; text-align: center;"wx:key="months2">{{item}}月</view>
  30.       </picker-view-column>
  31.       <picker-view-column>
  32.         <view wx:for="{{days2}}" wx:key="{{days2}}" style="line-height: 50px; text-align: center;" wx:key="days2">{{item}}日</view>
  33.       </picker-view-column>
  34.         <picker-view-column>
  35.           <view wx:for="{{hours}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}时</view>
  36.         </picker-view-column>
  37.           <picker-view-column>
  38.           <view wx:for="{{minutes}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}分</view>
  39.         </picker-view-column>
  40.  
  41.     </picker-view>
  42.   </view>
  43.  
  44. </view>

 js

  1.  
  2. const date = new Date()
  3. const globaltimer = new Date().getTime()
  4. const globalyear = date.getFullYear()
  5. const globalmonth = date.getMonth() + 1
  6. const globalday = date.getDate()
  7.  
  8.  
  9. function getDays(year, month) {
  10.   var d = new Date(year, month, 0);
  11.   return (year == globalyear && month == globalmonth) ? globalday : d.getDate();
  12. }
  13.  
  14. function getIndex(arr, item) {
  15.   for (var i in arr) {
  16.     if (arr[i] == item) {
  17.       return i;
  18.     }
  19.   }
  20. }
  21.  
  22.  
  23. // for (let i = 1; i <= 31; i++) {
  24. //   days.push(i)
  25. // }
  26.  
  27. Page({
  28.  
  29.   data: {
  30.     years: [],
  31.     year: globalyear,
  32.     months: [],
  33.     month: globalmonth,
  34.     days: [],
  35.     day: globalday,
  36.     value: [],
  37.     // ----
  38.     years2: [],
  39.     year2: globalyear,
  40.     months2: [],
  41.     month2: globalmonth,
  42.     days2: [],
  43.     day2: globalday,
  44.     value2: [],
  45.     btn_type: '1',
  46.     hours: [],
  47.     minutes: [],
  48.     hour: '00',
  49.     minute: "00",
  50.     hour2: '23',
  51.     minute2: "59"
  52.   },
  53.   // 切换事件
  54.   btnTap: function (e) {
  55.     var that = this;
  56.     let data = this.data
  57.     console.log(e);
  58.     // 初始化选择器索引
  59.     var btn_id = e.currentTarget.id;
  60.     let n_yindex = data.years2.indexOf(data.year2)
  61.     let n_mindex = data.months2.indexOf(data.month2)
  62.     let n_dindex = data.days2.indexOf(data.day2)
  63.     let n_minindex = getIndex(data.minutes, data.minute2)
  64.     let n_hourindex = getIndex(data.hours, data.hour2)
  65.     console.log(n_minindex, "[[[[[");
  66.  
  67.     let o_yndex = data.years.indexOf(data.year)
  68.     let o_mindex = data.months.indexOf(data.month)
  69.     let o_dindex = data.days.indexOf(data.day)
  70.     let o_minindex = getIndex(data.minutes, data.minute)
  71.     let o_hourindex = getIndex(data.hours, data.hour)
  72.  
  73.     that.setData({
  74.       btn_type: btn_id,
  75.       value2: [
  76.         n_yindex, n_mindex, n_dindex, n_hourindex, n_minindex,
  77.       ],
  78.       value: [
  79.         o_yndex, o_mindex, o_dindex, o_hourindex, o_minindex,
  80.       ]
  81.     });
  82.     console.log(this.data.value2);
  83.   },
  84.   //获取小时
  85.   currentHours: function (date) {
  86.     let hours = []
  87.     let that = this
  88.     for (let i = 0; i <= 23; i++) {
  89.       var k = i;
  90.       if (0 <= i && i < 10) {
  91.         k = "0" + i
  92.       }
  93.       hours.push(k)
  94.     }
  95.     that.setData({
  96.       hours: hours
  97.     });
  98.   },
  99.   //获取分钟
  100.   currentMinutes: function (date) {
  101.     let minutes = []
  102.     let that = this
  103.     for (let i = 0; i <= 59; i++) {
  104.       var k = i;
  105.       if (0 <= i && i < 10) {
  106.         k = "0" + i
  107.       }
  108.       minutes.push(k)
  109.     }
  110.     that.setData({
  111.       minutes: minutes
  112.     });
  113.   },
  114.   // 获取十天后的日期
  115.   getAllDateCN(startTime, endTime) {
  116.     let that = this
  117.     let o_days = []
  118.     let n_days = []
  119.     let e_year, e_month, e_day
  120.     var i = 0
  121.     while ((endTime.getTime() - startTime.getTime()) >= 0) {
  122.       if (endTime.getMonth() != startTime.getMonth()) {
  123.         o_days.push(startTime.getDate())
  124.       } else {
  125.         n_days.push(startTime.getDate())
  126.       }
  127.       e_year = endTime.getFullYear()
  128.       e_month = endTime.getMonth() + 1
  129.       e_day = endTime.getDate()
  130.  
  131.       startTime.setDate(startTime.getDate() + 1)
  132.       i += 1
  133.     }
  134.  
  135.     that.setData({
  136.       year2: e_year,
  137.       month2: e_month,
  138.       day2: e_day,
  139.       o_days: o_days,
  140.       n_days: n_days,
  141.       e_year: e_year,
  142.       e_month: e_month,
  143.  
  144.     })
  145.     return { o_days, n_days, e_year, e_month, }
  146.  
  147.   },
  148.  
  149.   onShow() {
  150.     // 初始化选择器数组
  151.     this.initYears1()
  152.     this.initMonths1()
  153.     this.currentHours()
  154.     this.currentMinutes()
  155.     this.initDays1(globalyear, globalmonth)
  156.     let { years, months, days, hours, minutes } = this.data
  157.     this.setData({
  158.       value: [years.length - 1, months.length - 1, days.length - 1, hours[0], minutes[0]],
  159.       years2: [globalyear],
  160.       months2: [globalmonth],
  161.       days2: [globalday],
  162.       o_days: [globalday]
  163.     })
  164.  
  165.   },
  166.   // 初始化开始年
  167.   initYears1() {
  168.     let { years, } = this.data
  169.     for (let i = 2016; i <= globalyear; i++) {
  170.       years.push(i)
  171.     }
  172.     this.setData({ years })
  173.   },
  174.   //初始化开始月
  175.   initMonths1() {
  176.     let { year, months, } = this.data
  177.  
  178.     months.length = 0
  179.     if (year == globalyear) {
  180.       for (let i = 1; i <= globalmonth; i++) {
  181.         months.push(i)
  182.       }
  183.     } else {
  184.       for (let i = 1; i <= 12; i++) {
  185.         months.push(i)
  186.       }
  187.     }
  188.     this.setData({ months })
  189.   },
  190.   // 初始化日
  191.   initDays1(year, month) {
  192.  
  193.     let { days } = this.data
  194.     days.length = 0
  195.     let len = year ? getDays(year, month) : getDays(globalyear, globalmonth)
  196.     for (let i = 1; i <= len; i++) {
  197.       days.push(i)
  198.     }
  199.     this.setData({ days })
  200.   },
  201.   // 开始时间选择器事件
  202.   bindChange(e) {
  203.     if (this.data.btn_type == '1') {
  204.  
  205.       let val = e.detail.value,
  206.         year = this.data.years[val[0]],
  207.         month = this.data.months[val[1]],
  208.         day = this.data.days[val[2]],
  209.         hour = this.data.hours[val[3]],
  210.         minute = this.data.minutes[val[4]];
  211.       this.setData({ year, month, day, hour, minute })
  212.       this.initMonths1()
  213.       this.initDays1(year, month)
  214.       let n_timer = null
  215.       let nowTime = new Date(`${year}/${month}/${day}`)
  216.       var lastTime = new Date(Date.parse(nowTime) + 9 * 24 * 60 * 60 * 1000)
  217.  
  218.       if (lastTime.getTime() > globaltimer) {
  219.         n_timer = new Date()
  220.       } else {
  221.         n_timer = lastTime
  222.       }
  223.       let res = this.getAllDateCN(nowTime, n_timer)
  224.       let datae = { year, month, day, ...res }
  225.       this.initYears2(datae)
  226.       this.initMonths2(datae)
  227.       this.initDays2(datae)
  228.     }
  229.     let data = this.data
  230.     this.setData({
  231.       hour2: '23',
  232.       minute2: '59'
  233.     })
  234.  
  235.  
  236.  
  237.   },
  238.   // 初始化结束年
  239.   initYears2(data) {
  240.     let { e_year, year } = data
  241.     let { years2, } = this.data
  242.     years2 = []
  243.     if (e_year == year) {
  244.       years2.push(e_year)
  245.     } else {
  246.       years2.push(year, e_year)
  247.     }
  248.     this.setData({
  249.       years2
  250.     })
  251.   },
  252.   //初始化结束月
  253.   initMonths2(datae) {
  254.     let { e_month, month, e_year, year } = datae
  255.     let { months2, } = this.data
  256.     months2 = []
  257.     if (e_month == month) {//没跨月
  258.       months2.push(e_month)
  259.     } else if (e_year != year) { //跨年
  260.       months2.push(e_month)
  261.     } else {//跨月
  262.       months2.push(month, e_month)
  263.     }
  264.  
  265.     this.setData({
  266.       months2
  267.     })
  268.   },
  269.   // 初始化结束天
  270.   initDays2(datae) {
  271.     let { o_days, n_days } = datae
  272.     console.log(o_days, n_days);
  273.  
  274.     let { days2 } = this.data
  275.     days2 = []
  276.     days2 = n_days
  277.     this.setData({
  278.       days2
  279.     })
  280.   },
  281.   // 变动后初始化月
  282.   changeYear2(year2) {
  283.     let { months2, year, month, e_year, e_month } = this.data
  284.     months2 = []
  285.     if (year == e_year && month != e_month) {//跨月
  286.       months2.push(month, e_month)
  287.     } else {
  288.       console.log('else', year2, year);
  289.       if (year2 == year) {
  290.         months2.push(month)
  291.       } else {
  292.         months2.push(e_month)
  293.       }
  294.     }
  295.     this.setData({
  296.       months2
  297.     })
  298.   },
  299.   // 变动后初始化天
  300.   changeDays2(month2) {
  301.     let { days2, o_days, n_days, month } = this.data
  302.     days2 = []
  303.     console.log(days2, '=====');
  304.     if (month2 == month) {
  305.       days2 = o_days
  306.     } else {
  307.       days2 = n_days
  308.     }
  309.     //没跨月
  310.  
  311.     if (days2.length == 0) {
  312.       days2 = n_days
  313.     }
  314.     this.setData({
  315.       days2
  316.     })
  317.  
  318.   },
  319.   // 结束时间选择器事件
  320.   bindChange2(e) {
  321.     if (this.data.btn_type == '2') {
  322.  
  323.       console.log(e);
  324.       let val = e.detail.value,
  325.         year2 = this.data.years2[val[0]]
  326.       this.changeYear2(year2)
  327.       let month2 = this.data.months2[val[1]]
  328.       this.changeDays2(month2)
  329.       console.log(this.data.days2, '------- 天数 数组');
  330.       console.log(this.data.days2[val[2]], '??????');
  331.       let day2 = this.data.days2[val[2]];
  332.       let hour2 = this.data.hours[val[3]]
  333.       let minute2 = this.data.minutes[val[4]];
  334.       console.log(year2, month2, day2);
  335.       this.setData({
  336.         year2, month2, day2, hour2, minute2
  337.       })
  338.  
  339.     }
  340.   },
  341. })

wxss

  1. /* pages/picker-view/picker-view.wxss */
  2. .selected-date {
  3.   width: 600rpx;
  4.   height: 80rpx;
  5.   border: 2rpx solid #ccc;
  6.   margin: 100rpx auto;
  7.   text-align: center;
  8.   line-height: 80rpx;
  9. }
  10.  
  11. .btn_active {
  12.   border: 2rpx solid #f00;
  13.   color: #f00;
  14. }
  15.  
  16. .second_1_2 {
  17.   width: 670prx;
  18.   height: 78rpx;
  19.   background: #FFFFFF;
  20.   border-radius: 8rpx;
  21.   border: 2px solid #00B652;
  22.   margin: 0 auto;
  23.   text-align: center;
  24.   line-height: 78rpx;
  25. }
  26.  
  27. .second_1_1 {
  28.   width: 670rpx;
  29.   height: 78rpx;
  30.   background: #F4F6F7;
  31.   border-radius: 8rpx;
  32.   margin: 0 auto;
  33.   text-align: center;
  34.   line-height: 78rpx;
  35. }

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

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

  

闽ICP备14008679号