describe('options - multi date', function () { let clock; let input; beforeEach(function () { clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)}); input = document.createElement('input'); testContainer.appendChild(input); }); afterEach(function () { testContainer.removeChild(input); clock.restore(); }); describe('maxNumberOfDates', function () { it('specifies the muximum number of dates the datepicker accepts for the selection', function () { let {dp, picker} = createDP(input, {maxNumberOfDates: 2}); dp.setDate('2/14/2020', '4/22/2020'); expect(dp.dates, 'to equal', [dateValue(2020, 1, 14), dateValue(2020, 3, 22)]); expect(input.value, 'to be', '02/14/2020,04/22/2020'); // the dates come later win dp.setDate('1/4/2020', '2/22/2020', '3/21/2020'); expect(dp.dates, 'to equal', [dateValue(2020, 1, 22), dateValue(2020, 2, 21)]); expect(input.value, 'to be', '02/22/2020,03/21/2020'); // repeated dates are eliminated dp.setDate('4/22/2020', '7/14/2020', '5/5/2020', '7/14/2020'); expect(dp.dates, 'to equal', [dateValue(2020, 6, 14), dateValue(2020, 4, 5)]); expect(input.value, 'to be', '07/14/2020,05/05/2020'); dp.destroy(); input.value = ''; ({dp, picker} = createDP(input, {maxNumberOfDates: 3})); dp.show(); let cells = getCells(picker); cells[19].click(); cells[9].click(); expect(dp.dates, 'to equal', [dateValue(2020, 1, 14), dateValue(2020, 1, 4)]); expect(input.value, 'to be', '02/14/2020,02/04/2020'); expect(filterCells(cells, '.selected'), 'to equal', [cells[19], cells[9]]); // view date is changed co the last selected item expect(filterCells(cells, '.focused'), 'to equal', [cells[9]]); input.value = '2/3/2020,2/22/2020'; dp.update(); expect(dp.dates, 'to equal', [dateValue(2020, 1, 3), dateValue(2020, 1, 22)]); expect(input.value, 'to be', '02/03/2020,02/22/2020'); expect(filterCells(cells, '.selected'), 'to equal', [cells[8], cells[27]]); // view date is changed co the last item of the selection expect(filterCells(cells, '.focused'), 'to equal', [cells[27]]); dp.destroy(); input.value = ''; ({dp, picker} = createDP(input, {maxNumberOfDates: 3})); dp.setDate('2/14/2020', '4/22/2020', '3/21/2020'); expect(dp.dates, 'to equal', [ dateValue(2020, 1, 14), dateValue(2020, 3, 22), dateValue(2020, 2, 21), ]); expect(input.value, 'to be', '02/14/2020,04/22/2020,03/21/2020'); dp.destroy(); input.value = ''; ({dp, picker} = createDP(input, {maxNumberOfDates: 3})); dp.show(); getCells(picker)[1].click(); getCells(picker)[40].click(); cells = getCells(picker); cells[19].click(); expect(dp.dates, 'to equal', [ dateValue(2020, 0, 27), dateValue(2020, 1, 7), dateValue(2020, 1, 14), ]); expect(input.value, 'to be', '01/27/2020,02/07/2020,02/14/2020'); expect(filterCells(cells, '.selected'), 'to equal', [cells[1], cells[12], cells[19]]); expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]); input.value = '2/3/2020,2/22/2020'; dp.update(); expect(dp.dates, 'to equal', [dateValue(2020, 1, 3), dateValue(2020, 1, 22)]); expect(input.value, 'to be', '02/03/2020,02/22/2020'); expect(filterCells(cells, '.selected'), 'to equal', [cells[8], cells[27]]); expect(filterCells(cells, '.focused'), 'to equal', [cells[27]]); // setting initial dates does not cuase error // (issue #51) dp.destroy(); input.value = '02/14/2020,04/22/2020,03/21/2020'; ({dp, picker} = createDP(input, {maxNumberOfDates: 2})); expect(dp.dates, 'to equal', [ dateValue(2020, 3, 22), dateValue(2020, 2, 21), ]); expect(input.value, 'to be', '04/22/2020,03/21/2020'); dp.destroy(); input.value = ''; }); it('makes the picker deselect the date when a selected date is clicked if value != 1', function () { const {dp, picker} = createDP(input, {maxNumberOfDates: 3}); dp.show(); let cells = getCells(picker); cells[19].click(); cells[12].click(); cells[19].click(); expect(dp.dates, 'to equal', [dateValue(2020, 1, 7)]); expect(input.value, 'to be', '02/07/2020'); expect(filterCells(cells, '.selected'), 'to equal', [cells[12]]); expect(filterCells(cells, '.focused'), 'to equal', [cells[12]]); cells[12].click(); expect(dp.dates, 'to equal', []); expect(input.value, 'to be', ''); expect(filterCells(cells, '.selected'), 'to equal', []); // view date is changed to the default view date expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]); dp.destroy(); input.value = ''; }); it('makes the picker deselect the date when a selected date is clicked if value != 1', function () { const {dp, picker} = createDP(input, {maxNumberOfDates: 3}); const cells = getCells(picker); dp.setDate('2/14/2020', '2/7/2020'); dp.show(); dp.setDate('2/14/2020'); expect(dp.dates, 'to equal', [dateValue(2020, 1, 7)]); expect(input.value, 'to be', '02/07/2020'); expect(filterCells(cells, '.selected'), 'to equal', [cells[12]]); expect(filterCells(cells, '.focused'), 'to equal', [cells[12]]); dp.setDate('2/11/2020', '2/7/2020', '2/14/2020'); expect(dp.dates, 'to equal', [dateValue(2020, 1, 11), dateValue(2020, 1, 14)]); expect(input.value, 'to be', '02/11/2020,02/14/2020'); expect(filterCells(cells, '.selected'), 'to equal', [cells[16], cells[19]]); expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]); dp.destroy(); input.value = ''; }); it('setDate() replaces the selection instead of deselect/merg-ing if clear: true option is passed', function () { const {dp, picker} = createDP(input, {maxNumberOfDates: 3}); const cells = getCells(picker); dp.setDate('2/14/2020', '2/7/2020'); dp.show(); dp.setDate('2/14/2020', {clear: true}); expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]); expect(input.value, 'to be', '02/14/2020'); expect(filterCells(cells, '.selected'), 'to equal', [cells[19]]); expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]); dp.setDate('2/11/2020', '2/7/2020', '2/14/2020', {clear: true}); expect(dp.dates, 'to equal', [ dateValue(2020, 1, 11), dateValue(2020, 1, 7), dateValue(2020, 1, 14), ]); expect(input.value, 'to be', '02/11/2020,02/07/2020,02/14/2020'); expect(filterCells(cells, '.selected'), 'to equal', [cells[16], cells[12], cells[19]]); expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]); dp.destroy(); input.value = ''; }); it('setDate() does nothing if no dates or all-invalid dates are passed', function () { const dp = new Datepicker(input, {maxNumberOfDates: 3}); dp.setDate('2/14/2020', '2/7/2020'); dp.show(); const origDates = [...dp.dates]; dp.setDate([]); expect(dp.dates, 'to equal', origDates); expect(input.value, 'to be', '02/14/2020,02/07/2020'); dp.setDate(); expect(dp.dates, 'to equal', origDates); expect(input.value, 'to be', '02/14/2020,02/07/2020'); dp.setDate([false, NaN], {clear: true}); expect(dp.dates, 'to equal', origDates); expect(input.value, 'to be', '02/14/2020,02/07/2020'); dp.setDate('', null); expect(dp.dates, 'to equal', origDates); expect(input.value, 'to be', '02/14/2020,02/07/2020'); dp.destroy(); }); it('setDate() clears all selected dates if no dates + clear: true option are passed', function () { const dp = new Datepicker(input, {maxNumberOfDates: 3}); dp.setDate('2/14/2020', '2/7/2020'); dp.show(); dp.setDate([], {clear: true}); expect(dp.dates, 'to equal', []); expect(input.value, 'to be', ''); dp.setDate('2/14/2020', '2/7/2020'); dp.setDate({clear: true}); expect(dp.dates, 'to equal', []); expect(input.value, 'to be', ''); dp.destroy(); }); it('setDate() does nothing if all-invalid dates + clear: true option are passed', function () { const dp = new Datepicker(input, {maxNumberOfDates: 3}); dp.setDate('2/14/2020', '2/7/2020'); dp.show(); const origDates = [...dp.dates]; dp.setDate([false, NaN], {clear: true}); expect(dp.dates, 'to equal', origDates); expect(input.value, 'to be', '02/14/2020,02/07/2020'); dp.setDate('', null, {clear: true}); expect(dp.dates, 'to equal', origDates); expect(input.value, 'to be', '02/14/2020,02/07/2020'); dp.destroy(); }); it('does not apply deselecting behavior to update()', function () { const {dp, picker} = createDP(input, {maxNumberOfDates: 3}); const cells = getCells(picker); dp.setDate('2/14/2020', '2/7/2020'); dp.show(); input.value = '2/14/2020'; dp.update(); expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]); expect(input.value, 'to be', '02/14/2020'); expect(filterCells(cells, '.selected'), 'to equal', [cells[19]]); expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]); input.value = '2/11/2020,2/7/2020,2/14/2020'; dp.update(); expect(dp.dates, 'to equal', [ dateValue(2020, 1, 11), dateValue(2020, 1, 7), dateValue(2020, 1, 14), ]); expect(input.value, 'to be', '02/11/2020,02/07/2020,02/14/2020'); expect(filterCells(cells, '.selected'), 'to equal', [cells[16], cells[12], cells[19]]); expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]); dp.destroy(); input.value = ''; }); it('makes getDate() return array of dates if value != 1', function () { const dp = new Datepicker(input, {maxNumberOfDates: 3}); expect(dp.getDate(), 'to equal', []); expect(dp.getDate('yyyy-mm-dd'), 'to equal', []); dp.setDate('2/11/2020', '2/7/2020', '2/14/2020'); expect(dp.getDate(), 'to equal', [new Date(2020, 1, 11), new Date(2020, 1, 7), new Date(2020, 1, 14)]); expect(dp.getDate('yyyy-mm-dd'), 'to equal', ['2020-02-11', '2020-02-07', '2020-02-14']); dp.setDate('2/7/2020', {clear: true}); expect(dp.getDate(), 'to equal', [new Date(2020, 1, 7)]); expect(dp.getDate('d M, yyyy'), 'to equal', ['7 Feb, 2020']); const changeDateListener = (e) => { evt = e; }; let evt; input.addEventListener('changeDate', changeDateListener); dp.setDate('7/4/2020', '7/14/2020'); expect(evt.detail.date, 'to equal', dp.getDate()); input.removeEventListener('changeDate', changeDateListener); dp.destroy(); input.value = ''; }); it('value 0 is considered unlimited', function () { if (window.navigator.userAgent.indexOf('Edge') > -1) { this.timeout(5000); } const max = new Date(2100, 0, 1).getTime(); const generateDates = (dates, length, index = 0) => { const date = dateUtils.stripTime(Math.floor(Math.random() * max)); if (dates.includes(date)) { return generateDates(dates, length, index); } else { dates.push(date); return index <= length ? generateDates(dates, length, index + 1) : dates; } }; const dates = generateDates([], 3000); const dp = new Datepicker(input, {maxNumberOfDates: 0}); dp.setDate(dates); expect(dp.dates, 'to equal', dates); dp.destroy(); input.value = ''; }); it('can be updated with setOptions()', function () { const dp = new Datepicker(input); dp.setOptions({maxNumberOfDates: 3}); dp.setDate('2/11/2020', '2/7/2020', '2/14/2020'); expect(dp.dates, 'to equal', [ dateValue(2020, 1, 11), dateValue(2020, 1, 7), dateValue(2020, 1, 14), ]); dp.setOptions({maxNumberOfDates: 1}); dp.setDate('7/4/2020', '4/22/2020'); expect(dp.dates, 'to equal', [dateValue(2020, 3, 22)]); expect(dp.getDate(), 'to be a date'); dp.destroy(); input.value = ''; }); }); describe('dateDelimiter', function () { it('specifies the date delemiter for the input string', function () { const dp = new Datepicker(input, {maxNumberOfDates: 3, dateDelimiter: '|'}); dp.setDate('2/14/2020', '4/22/2020'); expect(input.value, 'to be', '02/14/2020|04/22/2020'); input.value = '2/11/2020|2/7/2020|2/14/2020'; dp.update(); expect(dp.dates, 'to equal', [ dateValue(2020, 1, 11), dateValue(2020, 1, 7), dateValue(2020, 1, 14), ]); dp.destroy(); input.value = ''; }); it('can be updated with setOptions()', function () { const dp = new Datepicker(input, {maxNumberOfDates: 3}); dp.setOptions({dateDelimiter: '_'}); dp.setDate('2/11/2020', '2/7/2020', '2/14/2020'); dp.setOptions({dateDelimiter: ' - '}); expect(input.value, 'to be', '02/11/2020 - 02/07/2020 - 02/14/2020'); dp.setOptions({dateDelimiter: ','}); expect(input.value, 'to be', '02/11/2020,02/07/2020,02/14/2020'); dp.destroy(); input.value = ''; }); }); });