| | |
| | | time: TimeView |
| | | }, |
| | | propTypes: { |
| | | date: TYPES.object, |
| | | // value: TYPES.object | TYPES.string, |
| | | // defaultValue: TYPES.object | TYPES.string, |
| | | onBlur: TYPES.func, |
| | | onChange: TYPES.func, |
| | | locale: TYPES.string, |
| | | input: TYPES.bool, |
| | | // enableDate: TYPES.string, |
| | | // enableTime: TYPES.string, |
| | | // dateFormat: TYPES.string | TYPES.bool, |
| | | // timeFormat: TYPES.string | TYPES.bool, |
| | | inputProps: TYPES.object, |
| | | viewMode: TYPES.oneOf(['years', 'months', 'days', 'time']), |
| | | minDate: TYPES.object, |
| | | maxDate: TYPES.object |
| | | isValidDate: TYPES.func, |
| | | open: TYPES.bool, |
| | | strictParsing: TYPES.bool |
| | | }, |
| | | getDefaultProps: function() { |
| | | |
| | | getDefaultProps: function() { |
| | | var nof = function(){}; |
| | | return { |
| | | date: new Date(), |
| | | className: '', |
| | | defaultValue: '', |
| | | viewMode: 'days', |
| | | inputProps: {}, |
| | | input: true, |
| | | enableTime: true, |
| | | enableDate: true, |
| | | onBlur: function () {}, |
| | | onChange: function (x) { |
| | | console.log(x); |
| | | } |
| | | onBlur: nof, |
| | | onChange: nof, |
| | | timeFormat: true, |
| | | dateFormat: true, |
| | | strictParsing: true |
| | | }; |
| | | }, |
| | | |
| | | getInitialState: function() { |
| | | var formats = this.getFormats( this.props ), |
| | | date = this.props.date, |
| | | currentView = this.props.viewMode |
| | | var state = this.getStateFromProps( this.props ); |
| | | |
| | | if( state.open == undefined ) |
| | | state.open = !this.props.input; |
| | | |
| | | state.currentView = this.props.dateFormat ? this.props.viewMode : 'time'; |
| | | |
| | | return state; |
| | | }, |
| | | |
| | | getStateFromProps: function( props ){ |
| | | var formats = this.getFormats( props ), |
| | | date = props.value || props.defaultValue, |
| | | selectedDate, viewDate |
| | | ; |
| | | |
| | | if( !formats.date ) |
| | | currentView = 'time'; |
| | | if( date && typeof date == 'string' ) |
| | | selectedDate = this.localMoment( date, formats.datetime ); |
| | | else if( date ) |
| | | selectedDate = this.localMoment( date ); |
| | | |
| | | if( selectedDate && !selectedDate.isValid() ) |
| | | selectedDate = null; |
| | | |
| | | viewDate = selectedDate ? |
| | | selectedDate.clone().startOf("month") : |
| | | this.localMoment().startOf("month") |
| | | ; |
| | | |
| | | return { |
| | | currentView: currentView, |
| | | open: !this.props.input, |
| | | inputFormat: formats.datetime, |
| | | viewDate: this.localMoment(date).startOf("month"), |
| | | selectedDate: this.localMoment(date), |
| | | inputValue: this.localMoment(date).format( formats.datetime ) |
| | | viewDate: viewDate, |
| | | selectedDate: selectedDate, |
| | | inputValue: selectedDate ? selectedDate.format( formats.datetime ) : (date || ''), |
| | | open: props.open != undefined ? props.open : this.state && this.state.open |
| | | }; |
| | | }, |
| | | |
| | | getFormats: function( props ){ |
| | | var formats = { |
| | | date: props.enableDate || '', |
| | | time: props.enableTime || '' |
| | | date: props.dateFormat || '', |
| | | time: props.timeFormat || '' |
| | | }, |
| | | locale = this.localMoment( props.date ).localeData() |
| | | ; |
| | |
| | | formats.time = locale.longDateFormat('LT'); |
| | | } |
| | | |
| | | formats.datetime = formats.date + ' ' + formats.time; |
| | | formats.datetime = formats.date && formats.time ? |
| | | formats.date + ' ' + formats.time : |
| | | formats.date || formats.time |
| | | ; |
| | | |
| | | return formats; |
| | | }, |
| | | |
| | | componentWillReceiveProps: function(nextProps) { |
| | | var formats = this.getFormats( nextProps ); |
| | | if ( formats.datetime !== this.getFormats(this.props).datetime ) { |
| | | return this.setState({ |
| | | inputFormat: nextProps.inputFormat |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | onChange: function(event) { |
| | | var value = event.target == null ? event : event.target.value, |
| | | localMoment = this.localMoment( date ) |
| | | var formats = this.getFormats( nextProps ), |
| | | update = {} |
| | | ; |
| | | |
| | | if (localMoment.isValid()) { |
| | | this.setState({ |
| | | selectedDate: localMoment, |
| | | viewDate: localMoment.clone().startOf("month") |
| | | }); |
| | | if( nextProps.value != this.props.value ){ |
| | | update = this.getStateFromProps( nextProps ); |
| | | } |
| | | if ( formats.datetime !== this.getFormats( this.props ).datetime ) { |
| | | update.inputFormat = formats.datetime; |
| | | } |
| | | |
| | | return this.setState({ |
| | | inputValue: value |
| | | }, function() { |
| | | return this.props.onChange( localMoment.toDate() ); |
| | | this.setState( update ); |
| | | }, |
| | | |
| | | onInputChange: function( e ) { |
| | | var value = e.target == null ? e : e.target.value, |
| | | localMoment = this.localMoment( value, this.state.inputFormat ), |
| | | update = { inputValue: value } |
| | | ; |
| | | |
| | | if ( localMoment.isValid() && !this.props.value ) { |
| | | update.selectedDate = localMoment; |
| | | update.viewDate = localMoment.clone().startOf("month"); |
| | | } |
| | | else { |
| | | update.selectedDate = null; |
| | | } |
| | | |
| | | return this.setState( update, function() { |
| | | return this.props.onChange( localMoment.isValid() ? localMoment : this.state.inputValue ); |
| | | }); |
| | | }, |
| | | |
| | |
| | | ; |
| | | return function( e ){ |
| | | me.setState({ |
| | | viewDate: me.state.viewDate.clone()[ type ]( parseInt(e.target.dataset.value) ).startOf( type ), |
| | | viewDate: me.state.viewDate.clone()[ type ]( parseInt(e.target.getAttribute('data-value')) ).startOf( type ), |
| | | currentView: nextViews[ type ] |
| | | }); |
| | | }; |
| | |
| | | allowedSetTime: ['hours','minutes','seconds', 'milliseconds'], |
| | | setTime: function( type, value ){ |
| | | var index = this.allowedSetTime.indexOf( type ) + 1, |
| | | date = this.state.selectedDate.clone(), |
| | | state = this.state, |
| | | date = (state.selectedDate || state.viewDate).clone(), |
| | | nextType |
| | | ; |
| | | |
| | |
| | | date[ nextType ]( date[nextType]() ); |
| | | } |
| | | |
| | | this.setState({ |
| | | selectedDate: date, |
| | | inputValue: date.format( this.state.inputFormat ) |
| | | }, this.callOnChange ); |
| | | if( !this.props.value ){ |
| | | this.setState({ |
| | | selectedDate: date, |
| | | inputValue: date.format( state.inputFormat ) |
| | | }); |
| | | } |
| | | this.props.onChange( date ); |
| | | }, |
| | | |
| | | callOnChange: function(){ |
| | | this.props.onChange(this.state.selectedDate.format( this.state.inputFormat )); |
| | | }, |
| | | |
| | | updateDate: function( e ) { |
| | | updateSelectedDate: function( e ) { |
| | | var target = e.target, |
| | | modifier = 0, |
| | | currentDate = this.state.selectedDate, |
| | | viewDate = this.state.viewDate, |
| | | currentDate = this.state.selectedDate || viewDate, |
| | | date |
| | | ; |
| | | |
| | |
| | | else if(target.className.indexOf("old") != -1) |
| | | modifier = -1; |
| | | |
| | | date = this.state.viewDate.clone() |
| | | .month( this.state.viewDate.month() + modifier ) |
| | | .date( parseInt( target.dataset.value ) ) |
| | | date = viewDate.clone() |
| | | .month( viewDate.month() + modifier ) |
| | | .date( parseInt( target.getAttribute('data-value') ) ) |
| | | .hours( currentDate.hours() ) |
| | | .minutes( currentDate.minutes() ) |
| | | .seconds( currentDate.seconds() ) |
| | | .milliseconds( currentDate.milliseconds() ) |
| | | ; |
| | | |
| | | this.setState({ |
| | | selectedDate: date, |
| | | viewDate: date.clone().startOf('month'), |
| | | inputValue: date.format( this.state.inputFormat ) |
| | | }, this.callOnChange ); |
| | | if( !this.props.value ){ |
| | | this.setState({ |
| | | selectedDate: date, |
| | | viewDate: date.clone().startOf('month'), |
| | | inputValue: date.format( this.state.inputFormat ) |
| | | }); |
| | | } |
| | | |
| | | this.props.onChange( date ); |
| | | }, |
| | | |
| | | openCalendar: function() { |
| | |
| | | }, |
| | | |
| | | handleClickOutside: function(){ |
| | | this.props.onBlur(this.state.inputValue); |
| | | if( this.props.input && this.state.open ) |
| | | if( this.props.input && this.state.open && !this.props.open ){ |
| | | this.setState({ open: false }); |
| | | this.props.onBlur( this.state.selectedDate || this.state.inputValue ); |
| | | } |
| | | }, |
| | | |
| | | localMoment: function( date ){ |
| | | var m = moment( date ); |
| | | localMoment: function( date, format ){ |
| | | var m = moment( date, format, this.props.strictParsing ); |
| | | if( this.props.locale ) |
| | | m.locale( this.props.locale ); |
| | | return m; |
| | | }, |
| | | |
| | | componentProps: { |
| | | fromProps: ['viewMode', 'minDate', 'maxDate', 'renderDay', 'renderMonth', 'renderYear'], |
| | | fromProps: ['value', 'isValidDate', 'renderDay', 'renderMonth', 'renderYear'], |
| | | fromState: ['viewDate', 'selectedDate' ], |
| | | fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateDate', 'localMoment'] |
| | | fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateSelectedDate', 'localMoment'] |
| | | }, |
| | | |
| | | getComponentProps: function(){ |
| | |
| | | render: function() { |
| | | var Component = this.viewComponents[ this.state.currentView ], |
| | | DOM = React.DOM, |
| | | className = 'rdt', |
| | | className = 'rdt ' + this.props.className, |
| | | children = [] |
| | | ; |
| | | |
| | |
| | | children = [ DOM.input( assign({ |
| | | key: 'i', |
| | | type:'text', |
| | | className:'form-control', |
| | | className: 'form-control', |
| | | onFocus: this.openCalendar, |
| | | onChange: this.onChange, |
| | | onChange: this.onInputChange, |
| | | value: this.state.inputValue |
| | | }, this.props.inputProps ))]; |
| | | } |
| | |
| | | } |
| | | }); |
| | | |
| | | // Make moment accessible through the Datetime class |
| | | Datetime.moment = moment; |
| | | |
| | | module.exports = Datetime; |