@gem-mine/rmc-calendar/es/DatePicker.js

React Mobile Calendar Component(web and react-native)

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React from 'react';
import RMCDatePicker from 'rmc-date-picker';
import ConfirmPanel from './panel/ConfirmPanel';

var DatePicker = function (_React$PureComponent) {
    _inherits(DatePicker, _React$PureComponent);

    function DatePicker() {
        _classCallCheck(this, DatePicker);

        var _this = _possibleConstructorReturn(this, _React$PureComponent.apply(this, arguments));

        _this.state = {
            date: _this.props.defaultValue,
            scrollPanel: 'year'
        };
        _this.onScrollChange = function (date) {
            var preDate = _this.state.date;

            if (!preDate) return;
            if (date.getFullYear() !== preDate.getFullYear()) {
                _this.setState({ date: date, scrollPanel: 'year' });
            } else if (date.getMonth() !== preDate.getMonth()) {
                _this.setState({ date: date, scrollPanel: 'month' });
            }
        };
        _this.onOk = function () {
            var onTimeOk = _this.props.onTimeOk;
            var date = _this.state.date;

            onTimeOk && date && onTimeOk(date);
        };
        _this.onCancel = function () {
            var onCancel = _this.props.onCancel;

            onCancel && onCancel();
        };
        return _this;
    }

    DatePicker.prototype.render = function render() {
        var _props = this.props,
            locale = _props.locale,
            title = _props.title,
            prefixCls = _props.prefixCls,
            pickerPrefixCls = _props.pickerPrefixCls,
            clientHeight = _props.clientHeight,
            minDate = _props.minDate,
            maxDate = _props.maxDate;
        var _state = this.state,
            date = _state.date,
            scrollPanel = _state.scrollPanel;

        var height = clientHeight && clientHeight * 5 / 8 - 52 || Number.POSITIVE_INFINITY;
        return React.createElement(
            'div',
            { className: 'time-picker' },
            React.createElement(
                'div',
                { className: 'header' },
                React.createElement(
                    'div',
                    { className: 'title' },
                    title || locale.title
                ),
                date ? React.createElement(
                    'div',
                    { className: 'time-show' },
                    React.createElement(
                        'span',
                        { className: scrollPanel === 'year' ? 'time-picker-scrolling' : '' },
                        date.getFullYear()
                    ),
                    ' -',
                    React.createElement(
                        'span',
                        { className: scrollPanel === 'month' ? 'time-picker-scrolling' : '' },
                        ' ',
                        date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
                    )
                ) : null
            ),
            React.createElement(RMCDatePicker, { prefixCls: prefixCls, pickerPrefixCls: pickerPrefixCls, style: {
                    height: height > 164 || height < 0 ? 164 : height,
                    overflow: 'hidden'
                }, mode: 'month', date: date, locale: locale, minDate: minDate, maxDate: maxDate, onScrollChange: this.onScrollChange }),
            React.createElement(ConfirmPanel, { type: 'one', locale: locale, onOk: this.onOk, onCancel: this.onCancel })
        );
    };

    return DatePicker;
}(React.PureComponent);

export default DatePicker;

DatePicker.defaultProps = {
    defaultValue: new Date()
};