diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js index fe3be17b31d..746b3974f50 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js +++ b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js @@ -108,22 +108,20 @@ export default class DatePickerInput extends PureComponent { } if (isDisabled(state.endDate, props.minDate, props.maxDate)) { state.endDate = props.maxDate - // state.endDate = addDays(props.maxDate, -1) - } - - // set the input values - if (DatePickerInput.isValidDate(state.startDate)) { - state._startDay = pad(format(state.startDate, 'D'), 2) - state._startMonth = pad(format(state.startDate, 'M'), 2) - state._startYear = format(state.startDate, 'YYYY') - } - if (DatePickerInput.isValidDate(state.endDate)) { - state._endDay = pad(format(state.endDate, 'D'), 2) - state._endMonth = pad(format(state.endDate, 'M'), 2) - state._endYear = format(state.endDate, 'YYYY') } + state._listenForPropChanges = true + } + // set the input values + if (DatePickerInput.isValidDate(state.startDate)) { + state._startDay = pad(format(state.startDate, 'D'), 2) + state._startMonth = pad(format(state.startDate, 'M'), 2) + state._startYear = format(state.startDate, 'YYYY') + } + if (DatePickerInput.isValidDate(state.endDate)) { + state._endDay = pad(format(state.endDate, 'D'), 2) + state._endMonth = pad(format(state.endDate, 'M'), 2) + state._endYear = format(state.endDate, 'YYYY') } - state._listenForPropChanges = true return state } @@ -330,7 +328,7 @@ export default class DatePickerInput extends PureComponent { setDate = (event, count, mode, type, fn) => { try { - let value = event.currentTarget.value + let value = event.target.value if ( parseFloat(value) > 0 && new RegExp(`[0-9]{${count}}`).test(value) @@ -384,18 +382,6 @@ export default class DatePickerInput extends PureComponent { generateDateList(params, mode) { return this.maskList.map((value, i) => { const state = value.slice(0, 1) - // let type = null - // switch (state) { - // case 'd': - // type = 'Day' - // break - // case 'm': - // type = 'Month' - // break - // case 'y': - // type = 'Year' - // break - // } const index = this.props.maskOrder.indexOf(value) const placeholderChar = this.props.maskPlaceholder[index] if (!this.props.separatorRexExp.test(value)) { @@ -412,11 +398,9 @@ export default class DatePickerInput extends PureComponent { }, onBlur: () => { this.setState({ - // [`_${mode}${type}`]: event.currentTarget.value, focusState: 'blur', _listenForPropChanges: false }) - // this[`set_${mode}${type}`](event) }, placeholderChar } @@ -537,8 +521,6 @@ export default class DatePickerInput extends PureComponent { icon="calendar" variant="secondary" on_submit={onSubmit} - // on_submit={this.onKeyUpHandler} - // onFocus={this.onKeyUpHandler} onKeyUp={this.onKeyUpHandler} {...rest} /> diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/DatePicker.test.js b/packages/dnb-ui-lib/src/components/date-picker/__tests__/DatePicker.test.js index ce0abd5ec40..633e88fbf8c 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/__tests__/DatePicker.test.js +++ b/packages/dnb-ui-lib/src/components/date-picker/__tests__/DatePicker.test.js @@ -93,6 +93,70 @@ describe('DatePicker component', () => { expect(Comp.find('.dnb-date-picker__calendar').length).toBe(2) }) + it('has a reacting start date input with valid value', () => { + const elem = Comp.find('input.dnb-date-picker__input--day').at(0) + + // by defualt we have the start day + expect(elem.instance().value).toBe('01') + + // listen to changes + let changedStartDate = null + Comp.setProps({ + on_change: ({ start_date }) => { + changedStartDate = start_date + } + }) + + // change the date + const value = '02' + elem.simulate('change', { + target: { value } + }) + + // then check the new input value + expect(elem.instance().value).toBe(value) + + // and the event fired value + expect(changedStartDate).toBe(`2019-01-${value}`) + + // reset the value + elem.simulate('change', { + target: { value: '01' } + }) + }) + + it('has a reacting end date input with valid value', () => { + const elem = Comp.find('input.dnb-date-picker__input--day').at(1) + + // by defualt we have the start day + expect(elem.instance().value).toBe('15') + + // listen to changes + let changedStartDate = null + Comp.setProps({ + on_change: ({ end_date }) => { + changedStartDate = end_date + } + }) + + // change the date + const value = '16' + elem.simulate('change', { + target: { value } + }) + + // then check the new input value + expect(elem.instance().value).toBe(value) + + // and the event fired value + expect(changedStartDate).toBe(`2019-02-${value}`) + + // reset the value + elem.simulate('change', { + target: { value: '15' } + }) + }) + it('is displaying correct month', () => { expect( Comp.find('.dnb-date-picker__header__title')