自定义日期选择器

components/My_datePicker/index.js

@@ -0,0 +1,80 @@
+const month = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+    day = ['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', '30', '31'],
+    getTime = require("../../utils/getTime");
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        startDate: {
+            type: String,
+            value: "2012-02-08"
+        },
+        endDate: {
+            type: String,
+            value: getTime.formatTime(new Date(), '-').split(' ')[0]
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        value: [9, 3, 3]
+    },
+    lifetimes: {
+        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)
+        }
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        handleChange(date) {
+            let arr = date.split('-'),
+                start = this.data.startDate.split('-');
+            let m = arr[1] - 0,
+                d = arr[2] - 0;
+            console.log(arr)
+            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 {
+                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))
+            if (m == 2) {
+                days = (y % 4 == 0) ? days.slice(0, 29) : days.slice(0, 28)
+            } else {
+                (arr1.includes(m)) ? '' : days.pop();
+            }
+            console.log(days)
+            this.setData({
+                days: (d == 0) ? days : days.slice(d - 1)
+            })
+        },
+        pickerChange({
+            detail
+        }) {
+            let arr = detail.value;
+            this.handleChange(`${this.data.years[arr[0]]}-${this.data.months[arr[1]]}-${this.data.days[arr[2]]}`)
+            setTimeout(() => {
+                console.log(`${this.data.years[arr[0]]}-${this.data.months[arr[1]]}-${this.data.days[arr[2]]}`)
+            }, 300)
+        },
+    }
+})

components/My_datePicker/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/My_datePicker/index.scss

@@ -0,0 +1,12 @@
+.picker {
+    width: 750rpx;
+    height: 450rpx;
+    overflow: hidden;
+    background: #fff;
+
+    .indicator {
+        height: 80rpx;
+        // background-color: #F5F5F5;
+        color: #000;
+    }
+}

components/My_datePicker/index.wxml

@@ -0,0 +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>
+        <picker-view-column>
+            <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
+        </picker-view-column>
+        <picker-view-column>
+            <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
+        </picker-view-column>
+    </picker-view>
+</view>

components/My_dropdownMenu/index.js

@@ -1,39 +0,0 @@
-// components/My_dropdownMenu/index.js
-Component({
-    /**
-     * 组件的属性列表
-     */
-    properties: {
-        mtype: {
-            type: String,
-            value: "date"
-        }
-    },
-
-    /**
-     * 组件的初始数据
-     */
-    data: {
-        sortByDate: [{
-                text: '默认排序',
-                value: 0
-            },
-            {
-                text: '按日期升序',
-                value: 1
-            },
-            {
-                text: '按日期降序',
-                value: 2
-            },
-        ],
-        sortByDateChecked: 0,
-    },
-
-    /**
-     * 组件的方法列表
-     */
-    methods: {
-
-    }
-})

components/My_dropdownMenu/index.json

@@ -1,7 +0,0 @@
-{
-    "component": true,
-    "usingComponents": {
-        "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
-        "van-dropdown-item": "@vant/weapp/dropdown-item/index"
-    }
-}

components/My_dropdownMenu/index.scss

@@ -1,5 +0,0 @@
-.slot-box {
-    width: 480rpx;
-    overflow: hidden;
-    box-sizing: border-box;
-}

components/My_dropdownMenu/index.wxml

@@ -1,6 +0,0 @@
-<van-dropdown-menu wx:if="{{mtype=='date'}}" custom-class='menu' active-color='var(--assist)'>
-    <view slot='leftSlot' class="slot-box">
-        <slot />
-    </view>
-    <van-dropdown-item value="{{ sortByDateChecked }}" options="{{ sortByDate }}" />
-</van-dropdown-menu>