1

commpents/datetime-picker/index.js

@@ -0,0 +1,71 @@
+// commpents/datetime-picker/index.js
+const app = getApp()
+const moment = require("../../utils/moment.min");
+Component({
+    /**
+     * 组件的属性列表
+     */
+    options: { multipleSlots: true },
+    properties: {
+        datetime: { type: String, value: '' },
+        fieldValue: { type: String, value: '' }
+    },
+    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
+    attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
+    ready: function () { },
+    pageLifetimes: {
+        // 组件所在页面的生命周期函数
+        show: function () { },
+        hide: function () { },
+        resize: function () { },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        dateTimeArray: [
+            ['2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010'],
+            ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+            ['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'],
+            ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
+            ['00', '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', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
+            ['00', '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', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
+        ],
+        // 计算日期
+        year: '',
+        moneh: '',
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        // 确认选择
+        change: function (e) {
+            const that = this;
+            let dateTimeArray = that.data.dateTimeArray;
+            let value = e.detail.value;
+            let datetime = dateTimeArray[0][value[0]] + '-' + dateTimeArray[1][value[1]] + '-' + dateTimeArray[2][value[2]] + ' ' + dateTimeArray[3][value[3]] + ':' + dateTimeArray[4][value[4]] + ':' + dateTimeArray[5][value[5]];
+            that.triggerEvent('datetimeChange', { datetime: datetime, fieldValue: that.properties.fieldValue })
+        },
+        // 选择月份
+        columnChange: function (e) {
+            const that = this;
+            const { column, value } = e.detail;
+            let dateTimeArray = that.data.dateTimeArray;
+            let year = '';
+            let month = '';
+            year = that.data.year || dateTimeArray[0][0];
+            month = that.data.month || dateTimeArray[1][0];
+            if (column == '0') year = dateTimeArray[0][value];
+            if (column == '1') month = dateTimeArray[1][value];
+            that.setData({ year: year, month: month });
+            // 计算当前选择年月所要显示的日期
+            let ym = that.data.year + '-' + that.data.month;
+            let test = ['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'];
+            let monthDay = moment(ym).daysInMonth();
+            let thr = test.splice(0, monthDay);
+            that.setData({ 'dateTimeArray[2]': thr })
+        },
+    }
+})
+

commpents/datetime-picker/index.json

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

commpents/datetime-picker/index.wxml

@@ -0,0 +1,5 @@
+<view class="main">
+    <picker mode="multiSelector" value="{{datetime}}" bindchange="change" bindcolumnchange="columnChange" range="{{dateTimeArray}}">
+        <view class="text">{{datetime||'选择日期时间'}}</view>
+    </picker>
+</view>

pages/test/index.js

@@ -1,10 +1,7 @@
 // pages/test/index.js
 const app = getApp()
 import dateTimePicker from '../../utils/dateTimePicker';
-const moment = require("../../utils/moment.min");
-
 Page({
-
     /**
      * 页面的初始数据
      */
@@ -16,20 +13,7 @@ Page({
         img_url: [],
         // dialog弹框
         dialog: { title: '弹框标题', show: false, type: '1' },
-        // 日期时间选择
-        dateTimeArray: [
-            ['2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010'],
-            ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
-            ['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'],
-            ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
-            ['00', '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', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
-            ['00', '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', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
-        ],
-        // 日期时间选择
-        datatime: '',
-        // 计算日期
-        year: '',
-        moneh: ''
+        form: {}
     },
     // 跳转菜单
     tabPath(e) {
@@ -65,48 +49,10 @@ Page({
         that.setData({ dialog: { title: '弹框标题', show: false, type: '1' } })
     },
     // 确认选择
-    change: function (e) {
+    datetimeChange: function (e) {
         const that = this;
-        let dateTime = that.data.dateTimeArray;
-        let value = e.detail.value;
-        let datetimes = dateTime[0][value[0]] + '-' + dateTime[1][value[1]] + '-' + dateTime[2][value[2]] + ' ' + dateTime[3][value[3]] + ':' + dateTime[4][value[4]] + ':' + dateTime[5][value[5]];
-        that.setData({ datatime: datetimes });
-    },
-    // 选择月份
-    columnChange: function (e) {
-        const that = this;
-        const { column, value } = e.detail;
-        let dateTimeArray = that.data.dateTimeArray;
-        let year = that.data.year;
-        let month = that.data.month;
-
-        // let year = monthDay.year || dateTimeArray[0][0];
-        // let month = monthDay.month || dateTimeArray[1][0];
-        // if (column == '0') year = dateTimeArray[0][value];
-        // else if (column == '1') month = dateTimeArray[1][value];
-        // console.log(year);
-        // console.log(month);
-        // that.setData({ monthDay: { year: year, moneh: month } });
-        // console.log(that.data.monthDay);
-        // 计算当前选择年月所要显示的日期
-        let ym = year + '-' + month;
-        // let monthDay = moment(ym).daysInMonth();
-        // console.log(monthDay);
-        // if (column == '0') {
-        //     console.log(column, value);
-        // } else if (column == '1') {
-        //     monthDay = dateTimeArray
-        // }
-        // that.setData({ monthDay })
-        // console.log(that.data.monthDay);
-        // console.log(data);
-        // if (column == '0') {
-        //     console.log('0');
-        // } else if (column == '1') {
-        //     console.log('1');
-        // }
-        // console.log(column);
-        // console.log(value);
+        that.setData({ [`form.${e.detail.fieldValue}`]: e.detail.datetime });
+        console.log(that.data.form);
     },
     /**
      * 生命周期函数--监听页面加载

pages/test/index.json

@@ -3,6 +3,7 @@
     "usingComponents": {
         "mobile-main": "/commpents/mobile-frame/index",
         "upload": "/commpents/upload/index",
-        "dialog": "/commpents/dialog/index"
+        "dialog": "/commpents/dialog/index",
+        "datatime-picker": "/commpents/datetime-picker/index"
     }
 }

pages/test/index.wxml

@@ -15,9 +15,7 @@
         <view class="zero">
             <view>日期时间选择</view>
             <view>
-                <picker mode="multiSelector" value="{{dateTime1}}" bindchange="change" bindcolumnchange="columnChange" range="{{dateTimeArray}}">
-                    <view class="text">{{datatime||'选择日期时间'}}</view>
-                </picker>
+                <datatime-picker datetime="{{form.start_time}}" fieldValue="end_time" bind:datetimeChange="datetimeChange"></datatime-picker>
             </view>
         </view>
     </view>