react-mobile-datepicker学习和进阶（包括修改分…

2018-06-24 01:02:15来源：未知阅读 ()

这是小弟第一次写博客，不接受差评！！！

首先说明下，react-mobile-datepicker是一个很好用的兼容移动端的日期时间控件，功能相当强大，具体用法不多说，可自行度娘，这里讲一下进阶篇。

一.设置分钟间隔段

　　因为项目需求，分钟要求可选要间隔5分钟。本来想过换个控件，但是并不是那么好找的，于是决定改造一下原来的控件。在react-mobile-datepicker.js里，主要修改下面一段

 1 function nextMinute(now) {
 2         var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 3 
 4         throwIfInvalidDate(now);
 5         //添加下面这段
 6         var d = new Date(now.getTime());
 7         var minute = d.getMinutes();
 8         var m = Math.ceil(minute / 5) * 5;
 9         m = m + index * 5;
10 
11         var date = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), m, d.getSeconds());
12         return date;
13     }

因为比较偷懒，项目只要求间隔5分钟，所以没有弄成可配置，如果想自由设置间隔数，与上面的思路是一致的。效果图如下：

二.设置时间可选事件段

　　上面那个刚改好，甲方又来需求了，“那个我们想限制可选时间段。”没办法，改呗。

控件本身并没有参数设置最大和最小时间，所以自定义了2个参数：

ModalDatePicker.defaultProps = {
        isPopup: true,
        isOpen: false,
        theme: 'default',
        value: new Date(),
        min: new Date(1970, 0, 1),
        max: new Date(2050, 0, 1),
        showHeader: true,
        dateFormat: ['YYYY', 'M', 'D'],
        showFormat: 'YYYY/MM/DD',
        confirmText: '完成',
        cancelText: '取消',
        onSelect: function onSelect() { },
        onCancel: function onCancel() { },
        //这是添加的参数
        minTime: [0, 0],
        maxTime: [23, 59]
    };

数组第一位是小时，第二位是分钟。然后修改下面几个部分：

{
            key: '_moveToNext',
            value: function _moveToNext(direction) {
                var date = this.state.dates[MIDDLE_INDEX];
                var _props = this.props,
                    max = _props.max,
                    min = _props.min,
                    minTime = _props.minTime,
                    maxTime = _props.maxTime;

                if (direction === -1 && date.getTime() < min.getTime()) {
                    this._updateDates(1);
                } else if (direction === 1 && date.getTime() > max.getTime()) {
                    this._updateDates(-1);
                }
                //超出限制时间禁止滑动
                if (direction === -1 && (date.getHours() < minTime[0] || (date.getHours() == minTime[0] && date.getMinutes() < minTime[1]))) {
                    this._updateDates(1);
                } else if (direction === 1 && (date.getHours() > maxTime[0] || (date.getHours() == maxTime[0] && date.getMinutes() > maxTime[1]))) {
                    this._updateDates(-1);
                }

                this._moveTo(this.refs.scroll, this.currentIndex);
            }

{
            key: 'handleMove',
            value: function handleMove(event) {
                var touchY = !isUndefined(event.targetTouches) && !isUndefined(event.targetTouches[0]) ? event.targetTouches[0].pageY : event.pageY;

                var dir = touchY - this.touchY;
                var translateY = this.translateY + dir;
                var direction = dir > 0 ? -1 : 1;

                // 日期最小值，最大值限制
                var date = this.state.dates[MIDDLE_INDEX];
                var _props2 = this.props,
                    max = _props2.max,
                    min = _props2.min,
                    minTime = _props2.minTime,
                    maxTime = _props2.maxTime;

                if (date.getTime() < min.getTime() || date.getTime() > max.getTime()) {
                    return;
                }
                //超出时间直接过
                if ((date.getHours() < minTime[0] || (date.getHours() == minTime[0] && date.getMinutes() < minTime[1])) || (date.getHours() > maxTime[0] || (date.getHours() == maxTime[0] && date.getMinutes() > maxTime[1]))) {
                    return;
                }

                // 检测是否更新日期列表
                if (this._checkIsUpdateDates(direction, translateY)) {
                    this._updateDates(direction);
                }

                this.setState({ translateY: translateY });
            }
        }

{
            key: 'renderDatepickerItem',
            value: function renderDatepickerItem(date, index) {
                var minTime = this.props.minTime,
                    maxTime = this.props.maxTime;
                var className = date < this.props.min || date > this.props.max ? 'disabled' : '';
                //禁选的时间设置样式
                className = (date.getHours() < minTime[0] || (date.getHours() == minTime[0] && date.getMinutes() < minTime[1])) || (date.getHours() > maxTime[0] || (date.getHours() == maxTime[0] && date.getMinutes() > maxTime[1])) ? 'disabled' : '';
                return React__default.createElement(
                    'li',
                    {
                        key: index,
                        className: className
                    },
                    convertDate(date, this.props.format)
                );
            }
        }