reactjs-datetime/src/MonthsView.js

ReactJS Datetime Picker

'use strict';

var React = require('react'),
    createClass = require('create-react-class'),
    onClickOutside = require('react-onclickoutside'),
    DOM = require('react-dom-factories')
    ;

var DateTimePickerMonths = onClickOutside(createClass({
    render: function () {
        return DOM.div({ className: 'rdtMonths' }, [
            DOM.table({ key: 'a' }, DOM.thead({}, DOM.tr({}, [
                DOM.th({ key: 'prev', className: 'rdtPrev', onClick: this.props.subtractTime(1, 'years') }, DOM.span({}, '‹')),
                DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView('years'), colSpan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year()),
                DOM.th({ key: 'next', className: 'rdtNext', onClick: this.props.addTime(1, 'years') }, DOM.span({}, '›'))
            ]))),
            DOM.table({ key: 'months' }, DOM.tbody({ key: 'b' }, this.renderMonths()))
        ]);
    },

    renderMonths: function () {
        var date = this.props.selectedDate,
            month = this.props.viewDate.month(),
            year = this.props.viewDate.year(),
            rows = [],
            i = 0,
            months = [],
            renderer = this.props.renderMonth || this.renderMonth,
            isValid = this.props.isValidDate || this.alwaysValidDate,
            classes, props, currentMonth, isDisabled, noOfDaysInMonth, daysInMonth, validDay,
            irrelevantDate = 1
            ;

        while (i < 12) {
            classes = 'rdtMonth';
            currentMonth =
                this.props.viewDate.clone().set({ year: year, month: i, date: irrelevantDate });

            noOfDaysInMonth = currentMonth.endOf('month').format('D');
            daysInMonth = Array.from({ length: noOfDaysInMonth }, function (e, i) {
                return i + 1;
            });

            validDay = daysInMonth.find(function (d) {
                var day = currentMonth.clone().set('date', d);
                return isValid(day);
            });

            isDisabled = (validDay === undefined);

            if (isDisabled)
                classes += ' rdtDisabled';

            if (date && i === date.month() && year === date.year())
                classes += ' rdtActive';

            props = {
                key: i,
                'data-value': i,
                className: classes
            };

            if (!isDisabled)
                props.onClick = (this.props.updateOn === 'months' ?
                    this.updateSelectedMonth : this.props.setDate('month'));

            months.push(renderer(props, i, year, date && date.clone()));

            if (months.length === 4) {
                rows.push(DOM.tr({ key: month + '_' + rows.length }, months));
                months = [];
            }

            i++;
        }

        return rows;
    },

    updateSelectedMonth: function (event) {
        this.props.updateSelectedDate(event);
    },

    renderMonth: function (props, month) {
        var localMoment = this.props.viewDate;
        var monthStr = localMoment.localeData().monthsShort(localMoment.month(month));
        var strLength = 3;

        var monthStrFixedLength = monthStr.substring(0, strLength);
        return DOM.td(props, capitalize(monthStrFixedLength));
    },

    alwaysValidDate: function () {
        return 1;
    },

    handleClickOutside: function () {
        this.props.handleClickOutside();
    }
}));

function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

module.exports = DateTimePickerMonths;