浏览代码

自定义日期选择器

zhaoxiaohai 3 年之前
父节点
当前提交
d368fb2b41
共有 3 个文件被更改,包括 34 次插入16 次删除
  1. 27 8
      components/My_datePicker/index.js
  2. 1 2
      components/My_datePicker/index.scss
  3. 6 6
      components/My_datePicker/index.wxml

+ 27 - 8
components/My_datePicker/index.js

@@ -26,12 +26,14 @@ Component({
         ready() {
             let end = this.data.endDate.split('-')[0];
             let years = [];
+            //从开始到结束 渲染年数
             for (let start = this.data.startDate.split('-')[0] - 0; start <= end; start++) {
                 years.push(start)
             };
             this.setData({
                 years
             });
+            //开始处理
             this.handleChange(this.data.startDate)
         }
     },
@@ -39,33 +41,50 @@ Component({
      * 组件的方法列表
      */
     methods: {
+        /* 处理日期改变 */
         handleChange(date) {
             let arr = date.split('-'),
-                start = this.data.startDate.split('-');
-            let m = arr[1] - 0,
-                d = arr[2] - 0;
-            console.log(arr)
+                start = this.data.startDate.split('-'),
+                end = this.data.endDate.split('-');
+            let m = arr[1] - 0;
+            //选择年==开始年 删除未开始的月
             this.setData({
                 months: (arr[0] == start[0]) ? month.slice(start[1] - 1) : month
             })
             if (arr[0] == start[0]) {
+                //选择年==开始年&&开始年月==选择年月 删除未开始日
                 this.handleDays(arr[0], m, (m == start[1] - 0) ? start[2] - 0 : 0);
+            } else if (arr[0] == end[0]) {
+                //选择年==结束年  删除多余月
+                let ms = JSON.parse(JSON.stringify(month))
+                this.setData({
+                    months: ms.slice(0, end[1] - 0)
+                })
+                this.handleDays(arr[0], m, 0);
             } else {
+                //其他年份处理日
                 this.handleDays(arr[0], m, 0);
             }
         },
+        /* 处理日 */
         handleDays(y, m, d) {
-            let arr1 = [1, 3, 5, 7, 8, 10, 12];
-            let days = JSON.parse(JSON.stringify(day))
+            let arr1 = [1, 3, 5, 7, 8, 10, 12],
+                days = JSON.parse(JSON.stringify(day)),
+                end = this.data.endDate.split('-');
             if (m == 2) {
+                //二月份的话判断是否为闰年
                 days = (y % 4 == 0) ? days.slice(0, 29) : days.slice(0, 28)
             } else {
+                //其他月份判断有无31日
                 (arr1.includes(m)) ? '' : days.pop();
+            };
+            if (y == end[0] && m == end[1]) {
+                days = days.slice(0, end[2] - 0)
             }
-            console.log(days)
+            //如果是开始年传递过来 会裁剪掉多余的日
             this.setData({
                 days: (d == 0) ? days : days.slice(d - 1)
-            })
+            });
         },
         pickerChange({
             detail

+ 1 - 2
components/My_datePicker/index.scss

@@ -5,8 +5,7 @@
     background: #fff;
 
     .indicator {
-        height: 80rpx;
-        // background-color: #F5F5F5;
+        height: 90rpx;
         color: #000;
     }
 }

+ 6 - 6
components/My_datePicker/index.wxml

@@ -1,13 +1,13 @@
 <view class="picker">
     <picker-view indicator-class="indicator" style="width: 100%; height: 300px;" value="{{value}}" bindchange="pickerChange">
-        <picker-view-column>
-            <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
+        <picker-view-column style="width: 100%; text-align: center;">
+            <view wx:for="{{years}}" style="line-height: 90rpx">{{item}}年</view>
         </picker-view-column>
-        <picker-view-column>
-            <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
+        <picker-view-column style="width: 100%; text-align: center;">
+            <view wx:for="{{months}}" style="line-height: 90rpx">{{item}}月</view>
         </picker-view-column>
-        <picker-view-column>
-            <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
+        <picker-view-column style="width: 100%; text-align: center;">
+            <view wx:for="{{days}}" style="line-height: 90rpx">{{item}}日</view>
         </picker-view-column>
     </picker-view>
 </view>