微信小程序 自定义日期时间组件datetimepicker

如果小程序中有可复用的UI且具有一定的功能性，就可以使用自定义组件将其封装起来。（如果仅仅只需要复用UI可使用template）

我还算一个小程序的新手，自己看到处都是坑的官方文档，不得不说，腾讯官方的技术人员自认为自己很强（或许也很强），给出的文档很多东西都是莫名其妙的定义，和一些粗糙的案例，剩下的都靠程序员自己去揣测和实验，白白浪费时间。

好吧，这个方法是我看了网上一些前辈朋友给出的案例，研究了一番，写了两天才搞出来的。没办法，TMD的官方文档太扯了，要不停地实验测试。

先看效果：

未标题-1.jpg

自定义组件代码

小程序根目录下建components->date-time-picker文件夹：

## date-time-picker.json
{
    "component": true,
    "usingComponents": {}
}

## date-time-picker.wxml
<picker mode="multiSelector" class="{{className}}" name="{{name}}" value="{{multiSelectdArray}}" range="{{multiDateTime}}" bindcolumnchange="handleColumnChange" bindchange="handleValueChange" bindcancel="handleCancel">
  <slot></slot>
</picker>

### date-time-picker.js
// component/date-time-picker/date-time-picker.js
Component({
    options: {
        styleIsolation: 'apply-shared' //调用页面控制组件样式
    },
    properties: {
        name: String,
        className: String,
        startYear: String,
        endYear: String,
        value: String
    },

    /**
     * 组件的初始数据
     */
    data: {
        multiArray:[],
        multiSelectdArray: [0, 0, 0, 0, 0],
    },

    observers: {
    },

    ready: function(e) {
        this._formDateTime();
    },

    /**
     * 组件的方法列表
     */
    methods: {
        //格式化日期
        _formDateTime(){
            // 默认开始显示数据
            var nowDateTime = this.properties.value ? [...this.properties.value.split(' ')[0].split('-'), ...this.properties.value.split(' ')[1].split(':')] : this._getNewDateArry();
            var multiDateTime = [[],[],[],[],[]];
            var startYear = this.properties.startYear || nowDateTime[0];
            var endYear = this.data.properties || parseInt(nowDateTime[0]) + 1;
        
            // 处理联动列表数据
            /* 年月日 时分秒 */ 
            multiDateTime[0] = this._getLoopArray(startYear, endYear, '年');
            multiDateTime[1] = this._getLoopArray(1, 12, '月');
            multiDateTime[2] = this._getMonthDay(nowDateTime[0], nowDateTime[1], '日');
            multiDateTime[3] = this._getLoopArray(0, 23, '时');
            multiDateTime[4] = this._getLoopArray(0, 59, '分');
            // multiDateTime[5] = this._getLoopArray(0, 59, '秒');

            var multiSelectdArray = this._getMultiSelectdArray(multiDateTime, nowDateTime);
            this.setData({
                multiDateTime: multiDateTime,
                multiSelectdArray: multiSelectdArray,
            });
        },

        /* 查询选中状态数组 */
        _getMultiSelectdArray(multiDateTime, nowDateTime){
            let multiSelectdArray = this.data.multiSelectdArray;
            for (let i in multiDateTime) {
                for (let k in multiDateTime[i]) {
                    var a = multiDateTime[i][k];
                    if(a.replace(/[\u4e00-\u9fa5]/g, '') == nowDateTime[i]){
                        multiSelectdArray[i] = k;
                    }
                }
            }
            
            return multiSelectdArray;
        },

        /* 获取起始数组 */
        _getLoopArray(start, end, name){
            var name = name || '';
            var start = start || 0;
            var end = end || 1;
            var array = [];
            for (var i = start; i <= end; i++) {
                array.push(this._withData(i) + name);
            }
            
            return array;
        },

        /* 获取每月天数 */
        _getMonthDay(year, month, name){
            var name = name || 0;
            var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;
            switch (month) {
                case '01':
                case '03':
                case '05':
                case '07':
                case '08':
                case '10':
                case '12':
                array = this._getLoopArray(1, 31, name)
                break;

                case '04':
                case '06':
                case '09':
                case '11':
                array = this._getLoopArray(1, 30, name)
                break;

                case '02':
                array = flag ? this._getLoopArray(1, 29, name) : this._getLoopArray(1, 28, name)
                break;

                default:
                array = '月份格式不正确，请重新输入！'
            }
            return array;
        },

        /* 获取当前时间 */
        _getNewDateArry(){
            // 当前时间的处理
            var newDate = new Date();
            var year = this._withData(newDate.getFullYear()),
                mont = this._withData(newDate.getMonth() + 1),
                date = this._withData(newDate.getDate()),
                hour = this._withData(newDate.getHours()),
                minu = this._withData(newDate.getMinutes());
                // seco = this._withData(newDate.getSeconds());

            return [year, mont, date, hour, minu];
        },

        _stringToDate(str) {
            str = str.replace(/-/g, "/");
            return new Date(str);
        },

        /* 数据左边加0 */
        _withData(param){
            return param < 10 ? '0' + param : '' + param;
        },

        /* 切换时间 */
        handleColumnChange(e) {
            var multiSelectdArray = this.data.multiSelectdArray;
            if(e.detail.column <= 1){
                var multiDateTime = this.data.multiDateTime;
                var year = this.data.multiArray[multiSelectdArray[0]];
                var month = this._withData(e.detail.value + 1);
                multiDateTime[2] = this._getMonthDay(year, month, '日');

                this.setData({
                    multiDateTime: multiDateTime
                });
            }

            this.setData({
                multiSelectdArray: multiSelectdArray
            });
        },

        /* 改变picker值 */
        handleValueChange(e){
            var _this = this;
            let dateArr = [], multiSelectdArray = [];
            for (let i in e.detail.value) {
                let v = _this.data.multiDateTime[i][e.detail.value[i]];
                    v = v.replace(/[\u4e00-\u9fa5]/g, '');
                    multiSelectdArray.push(e.detail.value[i]);
                dateArr.push(v.toString());
            }

            _this.setData({
                multiSelectdArray: multiSelectdArray //设置下拉选中状态
            });

            let defaultDateTime = dateArr[0] + "-" + dateArr[1] + "-" + dateArr[2] + " " + dateArr[3] + ":" + dateArr[4];
            _this.triggerEvent('change', {
                date: defaultDateTime
            })
        },

        /* 取消 */
        handleCancel(e){
            _this.triggerEvent('cancel', {
            })
        }
    }
})

使用方法

1、在app.json中添加一个测试路径：

  "pages":[
    "pages/test/index",
  ],

小程序开发工具会自动生成四个文件：

/pages/test/index.wxml
/pages/test/index.wxss
/pages/test/index.js
/pages/test/index.json

2、在json文件中引入自定义组件，代码如下：

{
  "usingComponents": {
    "date-time-picker": "/components/date-time-picker/date-time-picker"
  }
}

3、wxml中引入组件：

## value 默认时间
## startYear 起始年份
## endYear 结束年份
## handleChange picker选定后执行的程序名称
<date-time-picker value="{{value}}" startYear="2019" endYear="2020" bind:change="handleChange">时间：{{value}}</date-time-picker>

4、js代码

// pages/test/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        value: "2020-12-31 15:11"
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    handleChange(e) {
        console.log(e)
        this.setData({
          value: e.detail.date
        })
    },
})

以上是就是全部代码了，可以直接使用，如果有BUG存在，还请留言提醒。
这个日期时间组件选定格式为 YYYY-MM-DD HH:ii，精确到分钟，因为精确到秒的用途不大，如果需要用到秒，只需要到组件date-time-picker.js中略微修改一下，把秒注释部分删除，增加multiArray，multiSelectdArray的长度就行了。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,542评论 6赞 504
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,822评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,912评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,449评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,500评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,370评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,193评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,074评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,505评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3赞 335
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,569评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,168评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2赞 354