react-mobile-datepicker學習和進階（包括修改分鍾選擇間隔段，小時分鍾時間可選時間段）

這是小弟第一次寫博客，不接受差評！！！

首先說明下，react-mobile-datepicker是一個很好用的兼容移動端的日期時間控件，功能相當強大，具體用法不多說，可自行度娘，這里講一下進階篇。

一.設置分鍾間隔段

　　因為項目需求，分鍾要求可選要間隔5分鍾。本來想過換個控件，但是並不是那么好找的，於是決定改造一下原來的控件。在react-mobile-datepicker.js里，主要修改下面一段

function nextMinute(now) {
        var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

        throwIfInvalidDate(now);
        //添加下面這段
        var d = new Date(now.getTime());
        var minute = d.getMinutes();
        var m = Math.ceil(minute / 5) * 5;
        m = m + index * 5;

        var date = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), m, d.getSeconds());
        return date;
    }

因為比較偷懶，項目只要求間隔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)
                );
            }
        }

效果圖如下，我設置是的10：30-22：30

 

 以上就是個人的學習之路，本來想上傳一個修改好的壓縮包，但是貌似沒有上傳附件的地方。。。