| | |
| | | /* eslint-disable */ |
| | | 'use strict'; |
| | | |
| | | var React = require('react'), |
| | | moment = require('moment') |
| | | ; |
| | | createClass = require('create-react-class'), |
| | | moment = require('moment'), |
| | | onClickOutside = require('react-onclickoutside').default |
| | | ; |
| | | |
| | | var DOM = React.DOM; |
| | | var DateTimePickerDays = React.createClass({ |
| | | |
| | | var DateTimePickerDays = onClickOutside( createClass({ |
| | | render: function() { |
| | | var footer = this.renderFooter(), |
| | | date = this.props.viewDate, |
| | | locale = date.localeData(), |
| | | tableChildren |
| | | ; |
| | | ; |
| | | |
| | | tableChildren = [ |
| | | DOM.thead({ key: 'th'}, [ |
| | | DOM.tr({ key: 'h'},[ |
| | | DOM.th({ key: 'p', className: 'rdtPrev' }, DOM.span({onClick: this.props.subtractTime(1, 'months')}, '‹')), |
| | | DOM.th({ key: 's', className: 'rdtSwitch', onClick: this.props.showView('months'), colSpan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ), |
| | | DOM.th({ key: 'n', className: 'rdtNext' }, DOM.span({onClick: this.props.addTime(1, 'months')}, '›')) |
| | | React.createElement('thead', { key: 'th' }, [ |
| | | React.createElement('tr', { key: 'h' }, [ |
| | | React.createElement('th', { key: 'p', className: 'rdtPrev', onClick: this.props.subtractTime( 1, 'months' )}, React.createElement('span', {}, '‹' )), |
| | | React.createElement('th', { key: 's', className: 'rdtSwitch', onClick: this.props.showView( 'months' ), colspan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ), |
| | | React.createElement('th', { key: 'n', className: 'rdtNext', onClick: this.props.addTime( 1, 'months' )}, React.createElement('span', {}, '›' )) |
| | | ]), |
| | | DOM.tr({ key: 'd'}, this.getDaysOfWeek( locale ).map( function( day, index ){ return DOM.th({ key: day + index, className: 'dow'}, day ); }) ) |
| | | React.createElement('tr', { key: 'd'}, this.getDaysOfWeek( locale ).map( function( day, index ) { return React.createElement('th', { key: day + index, className: 'dow'}, day ); }) ) |
| | | ]), |
| | | DOM.tbody({key: 'tb'}, this.renderDays()) |
| | | React.createElement('tbody', { key: 'tb' }, this.renderDays()) |
| | | ]; |
| | | |
| | | if( footer ) |
| | | if ( footer ) |
| | | tableChildren.push( footer ); |
| | | |
| | | return DOM.div({ className: 'rdtDays' }, |
| | | DOM.table({}, tableChildren ) |
| | | return React.createElement('div', { className: 'rdtDays' }, |
| | | React.createElement('table', {}, tableChildren ) |
| | | ); |
| | | }, |
| | | |
| | |
| | | * depending on the current locale |
| | | * @return {array} A list with the shortname of the days |
| | | */ |
| | | getDaysOfWeek: function( locale ){ |
| | | getDaysOfWeek: function( locale ) { |
| | | var days = locale._weekdaysMin, |
| | | first = locale.firstDayOfWeek(), |
| | | dow = [], |
| | | i = 0 |
| | | ; |
| | | ; |
| | | |
| | | days.forEach( function( day ){ |
| | | dow[ (7 + (i++) - first) % 7 ] = day; |
| | | days.forEach( function( day ) { |
| | | dow[ (7 + ( i++ ) - first) % 7 ] = day; |
| | | }); |
| | | |
| | | return dow; |
| | |
| | | weeks = [], |
| | | days = [], |
| | | renderer = this.props.renderDay || this.renderDay, |
| | | isValid = this.props.isValidDate || this.isValidDate, |
| | | classes, disabled, dayProps, currentDate |
| | | ; |
| | | isValid = this.props.isValidDate || this.alwaysValidDate, |
| | | classes, isDisabled, dayProps, currentDate |
| | | ; |
| | | |
| | | // Go to the last week of the previous month |
| | | prevMonth.date( prevMonth.daysInMonth() ).startOf('week'); |
| | | var lastDay = prevMonth.clone().add(42, 'd'); |
| | | prevMonth.date( prevMonth.daysInMonth() ).startOf( 'week' ); |
| | | var lastDay = prevMonth.clone().add( 42, 'd' ); |
| | | |
| | | while( prevMonth.isBefore( lastDay ) ){ |
| | | while ( prevMonth.isBefore( lastDay ) ) { |
| | | classes = 'rdtDay'; |
| | | currentDate = prevMonth.clone(); |
| | | |
| | | if( ( prevMonth.year() == currentYear && prevMonth.month() < currentMonth ) || ( prevMonth.year() < currentYear ) ) |
| | | if ( ( prevMonth.year() === currentYear && prevMonth.month() < currentMonth ) || ( prevMonth.year() < currentYear ) ) |
| | | classes += ' rdtOld'; |
| | | else if( ( prevMonth.year() == currentYear && prevMonth.month() > currentMonth ) || ( prevMonth.year() > currentYear ) ) |
| | | else if ( ( prevMonth.year() === currentYear && prevMonth.month() > currentMonth ) || ( prevMonth.year() > currentYear ) ) |
| | | classes += ' rdtNew'; |
| | | |
| | | if( selected && prevMonth.isSame(selected, 'day') ) |
| | | if ( selected && prevMonth.isSame( selected, 'day' ) ) |
| | | classes += ' rdtActive'; |
| | | |
| | | if (prevMonth.isSame(moment(), 'day') ) |
| | | if ( prevMonth.isSame( moment(), 'day' ) ) |
| | | classes += ' rdtToday'; |
| | | |
| | | disabled = !isValid( currentDate, selected ); |
| | | if( disabled ) |
| | | isDisabled = !isValid( currentDate, selected ); |
| | | if ( isDisabled ) |
| | | classes += ' rdtDisabled'; |
| | | |
| | | dayProps = { |
| | | key: prevMonth.format('M_D'), |
| | | key: prevMonth.format( 'M_D' ), |
| | | 'data-value': prevMonth.date(), |
| | | className: classes |
| | | }; |
| | | if( !disabled ) |
| | | |
| | | if ( !isDisabled ) |
| | | dayProps.onClick = this.updateSelectedDate; |
| | | |
| | | days.push( renderer( dayProps, currentDate, selected ) ); |
| | | |
| | | if( days.length == 7 ){ |
| | | weeks.push( DOM.tr( {key: prevMonth.format('M_D')}, days ) ); |
| | | if ( days.length === 7 ) { |
| | | weeks.push( React.createElement('tr', { key: prevMonth.format( 'M_D' )}, days ) ); |
| | | days = []; |
| | | } |
| | | |
| | |
| | | }, |
| | | |
| | | updateSelectedDate: function( event ) { |
| | | this.props.updateSelectedDate(event, true); |
| | | this.props.updateSelectedDate( event, true ); |
| | | }, |
| | | |
| | | renderDay: function( props, currentDate, selectedDate ){ |
| | | return DOM.td( props, currentDate.date() ); |
| | | renderDay: function( props, currentDate ) { |
| | | return React.createElement('td', props, currentDate.date() ); |
| | | }, |
| | | |
| | | renderFooter: function(){ |
| | | if( !this.props.timeFormat ) |
| | | renderFooter: function() { |
| | | if ( !this.props.timeFormat ) |
| | | return ''; |
| | | |
| | | var date = this.props.selectedDate || this.props.viewDate; |
| | | |
| | | return DOM.tfoot({ key: 'tf'}, |
| | | DOM.tr({}, |
| | | DOM.td({ onClick: this.props.showView('time'), colSpan: 7, className: 'rdtTimeToggle'}, date.format( this.props.timeFormat )) |
| | | return React.createElement('tfoot', { key: 'tf'}, |
| | | React.createElement('tr', {}, |
| | | React.createElement('td', { onClick: this.props.showView( 'time' ), colspan: 7, className: 'rdtTimeToggle' }, date.format( this.props.timeFormat )) |
| | | ) |
| | | ); |
| | | }, |
| | | isValidDate: function(){ return 1; } |
| | | }); |
| | | |
| | | alwaysValidDate: function() { |
| | | return 1; |
| | | }, |
| | | |
| | | handleClickOutside: function() { |
| | | this.props.handleClickOutside(); |
| | | } |
| | | })); |
| | | |
| | | module.exports = DateTimePickerDays; |
| | | /* eslint-enable */ |