| | |
| | | /* eslint-disable */ |
| | | 'use strict'; |
| | | |
| | | var React = require('react'), |
| | | moment = require('moment') |
| | | ; |
| | | createClass = require('create-react-class'), |
| | | onClickOutside = require('react-onclickoutside').default |
| | | ; |
| | | |
| | | var DOM = React.DOM; |
| | | var DateTimePickerMonths = React.createClass({ |
| | | 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' }, DOM.span({onClick: this.props.subtractTime(1, 'years')}, '‹')), |
| | | 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' }, DOM.span({onClick: this.props.addTime(1, 'years')}, '›')) |
| | | return React.createElement('div', { className: 'rdtMonths' }, [ |
| | | React.createElement('table', { key: 'a' }, React.createElement('thead', {}, React.createElement('tr', {}, [ |
| | | React.createElement('th', { key: 'prev', className: 'rdtPrev', onClick: this.props.subtractTime( 1, 'years' )}, React.createElement('span', {}, '‹' )), |
| | | React.createElement('th', { key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colspan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year() ), |
| | | React.createElement('th', { key: 'next', className: 'rdtNext', onClick: this.props.addTime( 1, 'years' )}, React.createElement('span', {}, '›' )) |
| | | ]))), |
| | | DOM.table({ key: 'months'}, DOM.tbody({ key: 'b'}, this.renderMonths())) |
| | | React.createElement('table', { key: 'months' }, React.createElement('tbody', { key: 'b' }, this.renderMonths())) |
| | | ]); |
| | | }, |
| | | |
| | |
| | | i = 0, |
| | | months = [], |
| | | renderer = this.props.renderMonth || this.renderMonth, |
| | | classes, props |
| | | ; |
| | | isValid = this.props.isValidDate || this.alwaysValidDate, |
| | | classes, props, currentMonth, isDisabled, noOfDaysInMonth, daysInMonth, validDay, |
| | | // Date is irrelevant because we're only interested in month |
| | | irrelevantDate = 1 |
| | | ; |
| | | |
| | | while (i < 12) { |
| | | classes = "rdtMonth"; |
| | | if( date && i === month && year === date.year() ) |
| | | classes += " rdtActive"; |
| | | 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, |
| | | onClick: this.props.updateOn=="months"? this.updateSelectedMonth : this.props.setDate('month') |
| | | className: classes |
| | | }; |
| | | |
| | | months.push( renderer( props, i, year, date && date.clone() )); |
| | | if ( !isDisabled ) |
| | | props.onClick = ( this.props.updateOn === 'months' ? |
| | | this.updateSelectedMonth : this.props.setDate( 'month' ) ); |
| | | |
| | | if( months.length == 4 ){ |
| | | rows.push( DOM.tr({ key: month + '_' + rows.length }, months) ); |
| | | months.push( renderer( props, i, year, date && date.clone() ) ); |
| | | |
| | | if ( months.length === 4 ) { |
| | | rows.push( React.createElement('tr', { key: month + '_' + rows.length }, months ) ); |
| | | months = []; |
| | | } |
| | | |
| | |
| | | }, |
| | | |
| | | updateSelectedMonth: function( event ) { |
| | | this.props.updateSelectedDate(event, true); |
| | | this.props.updateSelectedDate( event ); |
| | | }, |
| | | |
| | | renderMonth: function( props, month, year, selectedDate ) { |
| | | const monthsShort = this.props.viewDate.localeData()._monthsShort |
| | | return DOM.td( props, monthsShort.standalone |
| | | ? capitalize( monthsShort.standalone[ month ] ) |
| | | : monthsShort[ month ] |
| | | ) |
| | | } |
| | | }); |
| | | renderMonth: function( props, month ) { |
| | | var localMoment = this.props.viewDate; |
| | | var monthStr = localMoment.localeData().monthsShort( localMoment.month( month ) ); |
| | | var strLength = 3; |
| | | // Because some months are up to 5 characters long, we want to |
| | | // use a fixed string length for consistency |
| | | var monthStrFixedLength = monthStr.substring( 0, strLength ); |
| | | return React.createElement('td', props, capitalize( monthStrFixedLength ) ); |
| | | }, |
| | | |
| | | function capitalize(str) { |
| | | return str.charAt(0).toUpperCase() + str.slice(1) |
| | | alwaysValidDate: function() { |
| | | return 1; |
| | | }, |
| | | |
| | | handleClickOutside: function() { |
| | | this.props.handleClickOutside(); |
| | | } |
| | | })); |
| | | |
| | | function capitalize( str ) { |
| | | return str.charAt( 0 ).toUpperCase() + str.slice( 1 ); |
| | | } |
| | | |
| | | module.exports = DateTimePickerMonths; |
| | | /* eslint-enable */ |