diff --git a/src/datetime/DateTime.js b/src/datetime/DateTime.js index b842f4a7e..cc35563d0 100644 --- a/src/datetime/DateTime.js +++ b/src/datetime/DateTime.js @@ -59,7 +59,7 @@ export default class Datetime extends React.Component { onCalendarClose: nofn, onChange: nofn, onNavigate: nofn, - onBeforeNavigate: function(next) { return next; }, + onBeforeNavigate: function(next) { return next; }, onNavigateBack: nofn, onNavigateForward: nofn, dateFormat: true, @@ -108,7 +108,7 @@ export default class Datetime extends React.Component { onKeyDown: this._onInputKeyDown }; - if ( this.props.renderInput ) { + if ( this.props.renderInput ) { return (
{ this.props.renderInput( finalInputProps, this._openCalendar, this._closeCalendar ) } @@ -122,6 +122,10 @@ export default class Datetime extends React.Component { } renderView( currentView, renderer ) { + // Don't to DOM if datepicker shouldn't be visible + if (!this.isOpen()) { + return null; + } if ( this.props.renderView ) { return this.props.renderView( currentView, () => renderer(currentView) ); } @@ -150,18 +154,18 @@ export default class Datetime extends React.Component { // { viewDate, selectedDate, renderYear, isValidDate, navigate, showView, updateDate } viewProps.renderYear = props.renderYear; return ; - + case viewModes.MONTHS: // { viewDate, selectedDate, renderMonth, isValidDate, navigate, showView, updateDate } viewProps.renderMonth = props.renderMonth; return ; - + case viewModes.DAYS: - // { viewDate, selectedDate, renderDay, isValidDate, navigate, showView, updateDate, timeFormat + // { viewDate, selectedDate, renderDay, isValidDate, navigate, showView, updateDate, timeFormat viewProps.renderDay = props.renderDay; viewProps.timeFormat = this.getFormat('time'); return ; - + default: // { viewDate, selectedDate, timeFormat, dateFormat, timeConstraints, setTime, showView } viewProps.dateFormat = this.getFormat('date'); @@ -187,7 +191,7 @@ export default class Datetime extends React.Component { inputValue: this.getInitialInputValue( props, selectedDate, inputFormat ) }; } - + getInitialViewDate( propDate, selectedDate, format ) { let viewDate; if ( propDate ) { @@ -251,7 +255,7 @@ export default class Datetime extends React.Component { return cn; } - + isOpen() { return !this.props.input || (this.props.open === undefined ? this.state.open : this.props.open); } @@ -303,7 +307,7 @@ export default class Datetime extends React.Component { else if ( type === 'time' ) { return this.getTimeFormat( this.getLocaleData() ); } - + let locale = this.getLocaleData(); let dateFormat = this.getDateFormat( locale ); let timeFormat = this.getTimeFormat( locale ); @@ -368,7 +372,7 @@ export default class Datetime extends React.Component { _viewNavigate = ( modifier, unit ) => { let viewDate = this.state.viewDate.clone(); - + // Subtracting is just adding negative time viewDate.add( modifier, unit ); @@ -381,11 +385,11 @@ export default class Datetime extends React.Component { this.setState({viewDate}); } - + _setTime = ( type, value ) => { const state = this.state; let date = (state.selectedDate || state.viewDate).clone(); - + date[ type ]( value ); if ( !this.props.value ) { @@ -489,7 +493,7 @@ export default class Datetime extends React.Component { if ( selectedDate && selectedDate.isValid() ) { update.inputValue = selectedDate.format( this.getFormat('datetime') ); } - + this.setState( update ); } @@ -502,16 +506,16 @@ export default class Datetime extends React.Component { getInitialInputValue( props, selectedDate, inputFormat ) { if ( props.inputProps.value ) return props.inputProps.value; - + if ( selectedDate && selectedDate.isValid() ) return selectedDate.format( inputFormat ); - + if ( props.value && typeof props.value === 'string' ) return props.value; - + if ( props.initialValue && typeof props.initialValue === 'string' ) return props.initialValue; - + return ''; } @@ -533,7 +537,7 @@ export default class Datetime extends React.Component { }; if ( !date ) return logError(); - + let viewDate; if ( typeof date === 'string' ) { viewDate = this.localMoment(date, this.getFormat('datetime') ); @@ -548,7 +552,7 @@ export default class Datetime extends React.Component { /** * Set the view currently shown by the calendar. View modes shipped with react-datetime are 'years', 'months', 'days' and 'time'. - * @param TYPES.string mode + * @param TYPES.string mode */ navigate( mode ) { this._showView( mode ); diff --git a/test/__snapshots__/snapshots.spec.js.snap b/test/__snapshots__/snapshots.spec.js.snap index 5ba2735c0..bc4105e4e 100644 --- a/test/__snapshots__/snapshots.spec.js.snap +++ b/test/__snapshots__/snapshots.spec.js.snap @@ -2,7 +2,7 @@ exports[`className: set to arbitraty value 1`] = `
1482363367071); it('everything default: renders correctly', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('value: set to arbitrary value', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('defaultValue: set to arbitrary value', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -41,14 +41,14 @@ it('defaultValue: set to arbitrary value', () => { describe('dateFormat', () => { it('set to true', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('set to false', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -57,14 +57,14 @@ describe('dateFormat', () => { describe('timeFormat', () => { it('set to true', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('set to false', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -73,14 +73,14 @@ describe('timeFormat', () => { describe('input', () => { it('input: set to true', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('input: set to false', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -89,14 +89,14 @@ describe('input', () => { describe('open', () => { it('set to true', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('set to false', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -105,28 +105,28 @@ describe('open', () => { describe('viewMode', () => { it('set to days', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('set to months', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('set to years', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('set to time', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -134,7 +134,7 @@ describe('viewMode', () => { it('className: set to arbitraty value', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -142,35 +142,35 @@ it('className: set to arbitraty value', () => { describe('inputProps', () => { it('with placeholder specified', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('with disabled specified', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('with required specified', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('with name specified', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('with className specified', () => { const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -180,7 +180,7 @@ it('isValidDate: only valid if after yesterday', () => { const yesterday = Datetime.moment().subtract(1, 'day'); const valid = (current) => current.isAfter(yesterday); const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -188,7 +188,7 @@ it('isValidDate: only valid if after yesterday', () => { it('renderDay: specified', () => { const renderDay = (props, currentDate) => { '0' + currentDate.date() }; const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -196,7 +196,7 @@ it('renderDay: specified', () => { it('renderMonth: specified', () => { const renderMonth = (props, currentDate) => { '0' + currentDate.date() }; const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -204,7 +204,7 @@ it('renderMonth: specified', () => { it('renderYear: specified', () => { const renderYear = (props, currentDate) => { '0' + currentDate.date() }; const tree = renderer.create( - + ).toJSON(); expect(tree).toMatchSnapshot(); });