diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js index cb306c8db..935a66e0d 100644 --- a/src/DatePicker/DatePicker.js +++ b/src/DatePicker/DatePicker.js @@ -31,7 +31,6 @@ export class DatePicker extends Component { //This is being used only when the user presses enter or clicks outside of the component formatDate = (date) => { - let regex = /[!$%^&*()_+|~=`{}\[\]:'<>?,.\a-zA-Z]/; let formatDate = ''; if (this.props.enableRangeSelection) { if (date.length === 0) { @@ -61,125 +60,13 @@ export class DatePicker extends Component { secondDateDay + '/' + secondDateYear; - } else { - //Checks if the type of date doesn't match those types and that it doesn't contain any special character symbols - if (date.toString().search(regex) !== 1) { - return ''; - } else { - let month = date[0].getMonth(); - let day = date[0].getDate(); - let year = date[0].getFullYear(); - - formatDate = month + '/' + day + '/' + year; - } } return formatDate; } sendUpdate = (e) => { - let regex = /[!$%^&*()_+|~=`{}\[\]:'<>?,.\a-zA-Z]/; if (e.key === 'Enter') { - //Checks first if range is enabled - if (this.props.enableRangeSelection) { - //If the formattedDate contains a list of special characters symbols then it will be reset - if ( - this.state.formattedDate.search(regex) !== -1 || - this.state.formattedDate === '' || - this.state.formattedDate.split('-').length < 2 - ) { - this.setState({ - formattedDate: '', - arrSelectedDates: 'undefined', - hidden: false - }); - } else { - //Breaks the input into an array - let dateRange = this.state.formattedDate.split('-'); - let dateSeparatedFirstRange = dateRange[0].split('/'); - let dateSeparatedSecondRange = dateRange[1].split('/'); - - //First date - let firstYearRange = parseInt(dateSeparatedFirstRange[2], 10); - let firstDateRange = parseInt(dateSeparatedFirstRange[1], 10); - let firstMonthRange = parseInt(dateSeparatedFirstRange[0], 10); - - //Second date - let secondYearRange = parseInt(dateSeparatedSecondRange[2], 10); - let secondDateRange = parseInt(dateSeparatedSecondRange[1], 10); - let secondMonthRange = parseInt(dateSeparatedSecondRange[0], 10); - - //Checks if the input is actually numbers and follows the required form - if ( - (!isNaN(firstYearRange) || - !isNaN(firstDateRange) || - !isNaN(firstMonthRange)) && - (!isNaN(secondYearRange) || - !isNaN(secondDateRange) || - !isNaN(secondMonthRange)) && - (1 <= firstDateRange && firstDateRange <= 31) && - (1 < firstMonthRange && firstMonthRange <= 12) && - firstYearRange <= 3000 && - (1 <= secondDateRange && secondDateRange <= 31) && - (1 < secondMonthRange && secondMonthRange <= 12) && - secondYearRange <= 3000 - ) { - let firstDate = new Date( - firstYearRange, - firstMonthRange - 1, - firstDateRange - ); - let secondDate = new Date( - secondYearRange, - secondMonthRange - 1, - secondDateRange - ); - let arrSelected = []; - //Swaps the order in case one date is bigger than the other - firstDate.getTime() > secondDate.getTime() - ? (arrSelected = [secondDate, firstDate]) - : (arrSelected = [firstDate, secondDate]); - - this.setState({ - selectedDate: '', - arrSelectedDates: arrSelected - }); - } else { - this.setState({ - formattedDate: '', - selectedDate: 'undefined', - arrSelectedDates: 'undefined' - }); - } - } - } else { - if (this.state.formattedDate.search(regex) !== -1) { - this.setState({ - formattedDate: this.formatDate(this.state.selectedDate), - selectedDate: 'undefined' - }); - } else { - let dateSeparated = this.state.formattedDate.split('/'); - let year = parseInt(dateSeparated[2], 10); - let date = parseInt(dateSeparated[1], 10); - let month = parseInt(dateSeparated[0], 10); - - if ( - (!isNaN(year) || !isNaN(date) || !isNaN(month)) && - (1 <= date && date <= 31) && - (1 < month && month <= 12) && - year <= 3000 - ) { - this.setState({ - selectedDate: new Date(year, month - 1, date) - }); - } else { - this.setState({ - selectedDate: 'undefined', - formattedDate: '' - }); - } - } - } + this.validateDates(); } } @@ -198,8 +85,9 @@ export class DatePicker extends Component { this.clickOutside(); }; - clickOutside = () => { + validateDates = () => { let regex = /[!$%^&*()_+|~=`{}\[\]:'<>?,.\a-zA-Z]/; + //Checks first if range is enabled if (this.props.enableRangeSelection) { //If the formattedDate contains a list of special characters symbols then it will be reset if ( @@ -210,37 +98,31 @@ export class DatePicker extends Component { this.setState({ formattedDate: '', arrSelectedDates: 'undefined', - hidden: true + hidden: false }); } else { - //The range dates being split. + //Breaks the input into an array let dateRange = this.state.formattedDate.split('-'); let dateSeparatedFirstRange = dateRange[0].split('/'); let dateSeparatedSecondRange = dateRange[1].split('/'); + //First date let firstYearRange = parseInt(dateSeparatedFirstRange[2], 10); let firstDateRange = parseInt(dateSeparatedFirstRange[1], 10); let firstMonthRange = parseInt(dateSeparatedFirstRange[0], 10); + //Second date let secondYearRange = parseInt(dateSeparatedSecondRange[2], 10); let secondDateRange = parseInt(dateSeparatedSecondRange[1], 10); let secondMonthRange = parseInt(dateSeparatedSecondRange[0], 10); - if ( - (!isNaN(firstYearRange) || - !isNaN(firstDateRange) || - !isNaN(firstMonthRange)) && - (!isNaN(secondYearRange) || - !isNaN(secondDateRange) || - !isNaN(secondMonthRange)) && - (1 <= firstDateRange && firstDateRange <= 31) && - (1 < firstMonthRange && firstMonthRange <= 12) && + //Checks if the input is actually numbers and follows the required form + if ((1 <= firstDateRange && firstDateRange <= 31) && + (1 <= firstMonthRange && firstMonthRange <= 12) && firstYearRange <= 3000 && (1 <= secondDateRange && secondDateRange <= 31) && - (1 < secondMonthRange && secondMonthRange <= 12) && - secondYearRange <= 3000 && - dateRange[0].search(regex) === -1 && - dateRange[1].search(regex) === -1 + (1 <= secondMonthRange && secondMonthRange <= 12) && + secondYearRange <= 3000 ) { let firstDate = new Date( firstYearRange, @@ -252,26 +134,23 @@ export class DatePicker extends Component { secondMonthRange - 1, secondDateRange ); + let arrSelected = []; //Swaps the order in case one date is bigger than the other - if (firstDate.getTime() > secondDate.getTime()) { - this.setState({ - selectedDate: '', - arrSelectedDates: [secondDate, firstDate] - }); - } else { - this.setState({ - selectedDate: '', - arrSelectedDates: [firstDate, secondDate] - }); - } + firstDate.getTime() > secondDate.getTime() + ? (arrSelected = [secondDate, firstDate]) + : (arrSelected = [firstDate, secondDate]); + + this.setState({ + selectedDate: '', + arrSelectedDates: arrSelected + }); } else { this.setState({ formattedDate: '', - arrSelectedDates: 'undefined', - selectedDate: '' + selectedDate: 'undefined', + arrSelectedDates: 'undefined' }); } - this.setState({ hidden: true }); } } else { if (this.state.formattedDate.search(regex) !== -1) { @@ -285,10 +164,8 @@ export class DatePicker extends Component { let date = parseInt(dateSeparated[1], 10); let month = parseInt(dateSeparated[0], 10); - if ( - (!isNaN(year) || !isNaN(date) || !isNaN(month)) && - (1 <= date && date <= 31) && - (1 < month && month <= 12) && + if ((1 <= date && date <= 31) && + (1 <= month && month <= 12) && year <= 3000 ) { this.setState({ @@ -296,13 +173,17 @@ export class DatePicker extends Component { }); } else { this.setState({ - formattedDate: '', - selectedDate: 'undefined' + selectedDate: 'undefined', + formattedDate: '' }); } } - this.setState({ hidden: true }); } + } + + clickOutside = () => { + this.validateDates(); + this.setState({ hidden: true }); }; updateDate = (date) => { diff --git a/src/DatePicker/DatePicker.test.js b/src/DatePicker/DatePicker.test.js index 8de37d6f6..efe94975c 100644 --- a/src/DatePicker/DatePicker.test.js +++ b/src/DatePicker/DatePicker.test.js @@ -202,33 +202,52 @@ describe('', () => { let endRangeDate = new Date(); endRangeDate.setDate(endRangeDate.getDate() + 3); - let arrDates = [startRangeDate, endRangeDate]; - wrapper.instance().updateDate(arrDates); - let formattedDate = `${startRangeDate.getMonth() + 1}/${startRangeDate.getDate()}/${startRangeDate.getFullYear()}-${endRangeDate.getMonth() + 1}/${endRangeDate.getDate()}/${endRangeDate.getFullYear()}`; + wrapper.find('input[type="text"]') + .simulate('change', { target: { value: formattedDate } }); + + wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' }); + expect(wrapper.state('formattedDate')).toEqual(formattedDate); expect(wrapper.state('arrSelectedDates').length).toEqual(2); + }); - wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' }); + test('pressing enter key on date input where start date > than end date', () => { + wrapper = mount(rangeDatePicker); - // make start date bigger than end date - arrDates = [endRangeDate, startRangeDate]; - wrapper.instance().updateDate(arrDates); + let startRangeDate = new Date(); + let endRangeDate = new Date(); + endRangeDate.setDate(endRangeDate.getDate() + 3); let switchFormattedDate = `${endRangeDate.getMonth() + 1}/${endRangeDate.getDate()}/${endRangeDate.getFullYear()}-${startRangeDate.getMonth() + 1}/${startRangeDate.getDate()}/${startRangeDate.getFullYear()}`; + wrapper.find('input[type="text"]') + .simulate('change', { target: { value: switchFormattedDate } }); + + wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' }); + expect(wrapper.state('formattedDate')).toEqual(switchFormattedDate); expect(wrapper.state('arrSelectedDates').length).toEqual(2); + }); + test('enter a valid date string', () => { + // enter a valid date input + wrapper = mount(defaultDatePicker); + let date = new Date(); + let formattedDate = `${date.getMonth() + + 1}/${date.getDate()}/${date.getFullYear()}`; + wrapper.find('input[type="text"]') + .simulate('change', { target: { value: formattedDate } }); + + expect(wrapper.state('formattedDate')).toEqual(formattedDate); wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' }); - expect(wrapper.state('formattedDate')).toBe(''); - expect(wrapper.state('selectedDate')).toBe('undefined'); + expect(wrapper.state('selectedDate')).toEqual(new Date(date.getFullYear(), date.getMonth(), date.getDate())); }); test('enter an invalid date string', () => {