describe('DateRangePicker - date selection', function () { let clock; let elem; let input0; let input1; // let drp; let picker0; let picker1; let viewSwitch0; let viewSwitch1; let nextBtn0; let nextBtn1; let cells0; let cells1; before(function () { clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)}); }); after(function () { clock.restore(); }); beforeEach(function () { elem = domUtils.parseHTML('
').firstChild; [input0, input1] = elem.children; testContainer.appendChild(elem); }); afterEach(function () { testContainer.removeChild(elem); }); it('same date is set to both sides if a date is selected on one side when selections are none', function () { let selectDate = dateValue(2020, 1, 11); ({drp, picker0, picker1} = createDRP(elem)); cells0 = getCells(picker0); cells1 = getCells(picker1); drp.datepickers[0].show(); cells0[16].click(); expect(drp.dates, 'to equal', [selectDate, selectDate]); expect(input0.value, 'to be', '02/11/2020'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range-end'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range'), 'to equal', []); expect(filterCells(cells0, '.focused'), 'to equal', [cells0[16]]); expect(input1.value, 'to be', '02/11/2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[16]]); expect(filterCells(cells1, '.range-start'), 'to equal', [cells1[16]]); expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[16]]); expect(filterCells(cells1, '.range'), 'to equal', []); expect(filterCells(cells1, '.focused'), 'to equal', [cells1[16]]); drp.destroy(); input0.value = ''; input1.value = ''; ({drp, picker0, picker1} = createDRP(elem)); cells0 = getCells(picker0); cells1 = getCells(picker1); drp.datepickers[1].show(); cells1[16].click(); expect(drp.dates, 'to equal', [selectDate, selectDate]); expect(input0.value, 'to be', '02/11/2020'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range-end'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range'), 'to equal', []); expect(filterCells(cells0, '.focused'), 'to equal', [cells0[16]]); expect(input1.value, 'to be', '02/11/2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[16]]); expect(filterCells(cells1, '.range-start'), 'to equal', [cells1[16]]); expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[16]]); expect(filterCells(cells1, '.range'), 'to equal', []); expect(filterCells(cells1, '.focused'), 'to equal', [cells1[16]]); drp.destroy(); input0.value = ''; input1.value = ''; // other month than default view date's // (issue #17, #19) let partsClasses = ['.view-switch', '.next-btn']; selectDate = dateValue(2020, 2, 10); ({drp, picker0, picker1} = createDRP(elem)); [viewSwitch0, nextBtn0] = getParts(picker0, partsClasses); [viewSwitch1, nextBtn1] = getParts(picker1, partsClasses); drp.datepickers[0].show(); nextBtn0.click(); getCells(picker0)[9].click(); cells0 = getCells(picker0); cells1 = getCells(picker1); expect(drp.dates, 'to equal', [selectDate, selectDate]); expect(input0.value, 'to be', '03/10/2020'); expect(viewSwitch0.textContent, 'to equal', 'March 2020'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[9]]); expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[9]]); expect(filterCells(cells0, '.range-end'), 'to equal', [cells0[9]]); expect(filterCells(cells0, '.range'), 'to equal', []); expect(filterCells(cells0, '.focused'), 'to equal', [cells0[9]]); expect(input1.value, 'to be', '03/10/2020'); expect(viewSwitch1.textContent, 'to equal', 'March 2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[9]]); expect(filterCells(cells1, '.range-start'), 'to equal', [cells1[9]]); expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[9]]); expect(filterCells(cells1, '.range'), 'to equal', []); expect(filterCells(cells1, '.focused'), 'to equal', [cells1[9]]); drp.datepickers[1].show(); nextBtn1.click(); expect(viewSwitch1.textContent, 'to equal', 'April 2020'); drp.destroy(); input0.value = ''; input1.value = ''; ({drp, picker0, picker1} = createDRP(elem)); [viewSwitch0, nextBtn0] = getParts(picker0, partsClasses); [viewSwitch1, nextBtn1] = getParts(picker1, partsClasses); drp.datepickers[1].show(); nextBtn1.click(); getCells(picker1)[9].click(); cells0 = getCells(picker0); cells1 = getCells(picker1); expect(drp.dates, 'to equal', [selectDate, selectDate]); expect(input0.value, 'to be', '03/10/2020'); expect(viewSwitch0.textContent, 'to equal', 'March 2020'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[9]]); expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[9]]); expect(filterCells(cells0, '.range-end'), 'to equal', [cells0[9]]); expect(filterCells(cells0, '.range'), 'to equal', []); expect(filterCells(cells0, '.focused'), 'to equal', [cells0[9]]); expect(input1.value, 'to be', '03/10/2020'); expect(viewSwitch1.textContent, 'to equal', 'March 2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[9]]); expect(filterCells(cells1, '.range-start'), 'to equal', [cells1[9]]); expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[9]]); expect(filterCells(cells1, '.range'), 'to equal', []); expect(filterCells(cells1, '.focused'), 'to equal', [cells1[9]]); drp.datepickers[0].show(); nextBtn0.click(); expect(viewSwitch0.textContent, 'to equal', 'April 2020'); drp.destroy(); input0.value = ''; input1.value = ''; }); it('selections are cleared from both sides if selected date on one side is cleared', function () { input0.value = '02/11/2020'; input1.value = '02/11/2020'; ({drp, picker0, picker1} = createDRP(elem)); cells0 = getCells(picker0); cells1 = getCells(picker1); input0.value = ''; simulant.fire(input0, 'keydown', {key: 'Enter'}); expect(drp.dates, 'to equal', [undefined, undefined]); expect(input0.value, 'to be', ''); expect(filterCells(cells0, '.selected'), 'to equal', []); expect(filterCells(cells0, '.range-start'), 'to equal', []); expect(filterCells(cells0, '.range-end'), 'to equal', []); expect(filterCells(cells0, '.range'), 'to equal', []); expect(filterCells(cells0, '.focused'), 'to equal', [cells0[19]]); expect(input1.value, 'to be', ''); expect(filterCells(cells1, '.selected'), 'to equal', []); expect(filterCells(cells1, '.range-start'), 'to equal', []); expect(filterCells(cells1, '.range-end'), 'to equal', []); expect(filterCells(cells1, '.range'), 'to equal', []); expect(filterCells(cells1, '.focused'), 'to equal', [cells1[19]]); drp.destroy(); input0.value = '02/11/2020'; input1.value = '02/11/2020'; ({drp, picker0, picker1} = createDRP(elem)); cells0 = getCells(picker0); cells1 = getCells(picker1); input1.value = ''; simulant.fire(input1, 'keydown', {key: 'Enter'}); expect(drp.dates, 'to equal', [undefined, undefined]); expect(input0.value, 'to be', ''); expect(filterCells(cells0, '.selected'), 'to equal', []); expect(filterCells(cells0, '.range-start'), 'to equal', []); expect(filterCells(cells0, '.range-end'), 'to equal', []); expect(filterCells(cells0, '.range'), 'to equal', []); expect(filterCells(cells0, '.focused'), 'to equal', [cells0[19]]); expect(input1.value, 'to be', ''); expect(filterCells(cells1, '.selected'), 'to equal', []); expect(filterCells(cells1, '.range-start'), 'to equal', []); expect(filterCells(cells1, '.range-end'), 'to equal', []); expect(filterCells(cells1, '.range'), 'to equal', []); expect(filterCells(cells1, '.focused'), 'to equal', [cells1[19]]); drp.destroy(); }); it('dates are swapped if a date later than the 2nd picker\'s selection is seleted on the 1st picker', function () { input0.value = '02/11/2020'; input1.value = '02/11/2020'; ({drp, picker0, picker1} = createDRP(elem)); cells0 = getCells(picker0); cells1 = getCells(picker1); drp.datepickers[0].show(); cells0[20].click(); expect(drp.dates, 'to equal', [dateValue(2020, 1, 11), dateValue(2020, 1, 15)]); expect(input0.value, 'to be', '02/11/2020'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range-end'), 'to equal', [cells0[20]]); expect(filterCells(cells0, '.range'), 'to equal', [cells0[17], cells0[18], cells0[19]]); expect(filterCells(cells0, '.focused'), 'to equal', [cells0[16]]); expect(input1.value, 'to be', '02/15/2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[20]]); expect(filterCells(cells1, '.range-start'), 'to equal', [cells1[16]]); expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[20]]); expect(filterCells(cells1, '.range'), 'to equal', [cells1[17], cells1[18], cells1[19]]); expect(filterCells(cells1, '.focused'), 'to equal', [cells1[20]]); drp.destroy(); input0.value = ''; input1.value = ''; }); it('dates are swapped if a date earlier than the 1st picker\'s selection is seleted on the 2nd picker', function () { input0.value = '02/11/2020'; input1.value = '02/11/2020'; ({drp, picker0, picker1} = createDRP(elem)); cells0 = getCells(picker0); cells1 = getCells(picker1); drp.datepickers[1].show(); cells1[12].click(); expect(drp.dates, 'to equal', [dateValue(2020, 1, 7), dateValue(2020, 1, 11)]); expect(input0.value, 'to be', '02/07/2020'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[12]]); expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[12]]); expect(filterCells(cells0, '.range-end'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range'), 'to equal', [cells0[13], cells0[14], cells0[15]]); expect(filterCells(cells0, '.focused'), 'to equal', [cells0[12]]); expect(input1.value, 'to be', '02/11/2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[16]]); expect(filterCells(cells1, '.range-start'), 'to equal', [cells1[12]]); expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[16]]); expect(filterCells(cells1, '.range'), 'to equal', [cells1[13], cells1[14], cells1[15]]); expect(filterCells(cells1, '.focused'), 'to equal', [cells1[16]]); drp.destroy(); input0.value = ''; input1.value = ''; }); describe('range between different months', function () { it('each picker displays the month of corresponding end of the range', function () { input0.value = '02/25/2020'; input1.value = '03/05/2020'; ({drp, picker0, picker1} = createDRP(elem)); viewSwitch0 = picker0.querySelector('.view-switch'); viewSwitch1 = picker1.querySelector('.view-switch'); cells0 = getCells(picker0); cells1 = getCells(picker1); expect(viewSwitch0.textContent, 'to be', 'February 2020'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[30]]); expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[30]]); expect(filterCells(cells0, '.range-end'), 'to equal', [cells0[39]]); expect(filterCells(cells0, '.range'), 'to equal', cells0.slice(31, 39)); expect(viewSwitch1.textContent, 'to be', 'March 2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[4]]); expect(filterCells(cells1, '.range-start'), 'to equal', []); expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[4]]); expect(filterCells(cells1, '.range'), 'to equal', cells1.slice(0, 4)); drp.datepickers[1].show(); picker1.querySelector('.next-btn').click(); cells1 = getCells(picker1); cells1[24].click(); expect(drp.dates, 'to equal', [dateValue(2020, 1, 25), dateValue(2020, 3, 22)]); expect(input0.value, 'to be', '02/25/2020'); expect(input1.value, 'to be', '04/22/2020'); expect(viewSwitch0.textContent, 'to be', 'February 2020'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[30]]); expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[30]]); expect(filterCells(cells0, '.range-end'), 'to equal', []); expect(filterCells(cells0, '.range'), 'to equal', cells0.slice(31)); expect(viewSwitch1.textContent, 'to be', 'April 2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[24]]); expect(filterCells(cells1, '.range-start'), 'to equal', []); expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[24]]); expect(filterCells(cells1, '.range'), 'to equal', cells1.slice(0, 24)); input0.value = '02/14/1998'; simulant.fire(input0, 'keydown', {key: 'Enter'}); cells0 = getCells(picker0); expect(drp.dates, 'to equal', [dateValue(1998, 1, 14), dateValue(2020, 3, 22)]); expect(input0.value, 'to be', '02/14/1998'); expect(input1.value, 'to be', '04/22/2020'); expect(viewSwitch0.textContent, 'to be', 'February 1998'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[13]]); expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[13]]); expect(filterCells(cells0, '.range-end'), 'to equal', []); expect(filterCells(cells0, '.range'), 'to equal', cells0.slice(14)); expect(viewSwitch1.textContent, 'to be', 'April 2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[24]]); expect(filterCells(cells1, '.range-start'), 'to equal', []); expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[24]]); expect(filterCells(cells1, '.range'), 'to equal', cells1.slice(0, 24)); drp.datepickers[0].show(); // months view viewSwitch0.click(); cells0 = getCells(picker0); expect(viewSwitch0.textContent, 'to be', '1998'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[1]]); viewSwitch1.click(); cells1 = getCells(picker1); expect(viewSwitch1.textContent, 'to be', '2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[3]]); // years view viewSwitch0.click(); cells0 = getCells(picker0); expect(viewSwitch0.textContent, 'to be', '1990-1999'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[9]]); viewSwitch1.click(); cells1 = getCells(picker1); expect(viewSwitch1.textContent, 'to be', '2020-2029'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[1]]); // decades view viewSwitch0.click(); cells0 = getCells(picker0); expect(viewSwitch0.textContent, 'to be', '1900-1990'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[10]]); viewSwitch1.click(); cells1 = getCells(picker1); expect(viewSwitch1.textContent, 'to be', '2000-2090'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[3]]); drp.destroy(); input0.value = ''; input1.value = ''; }); it('dates are swapped if a date later than the 2nd picker\'s selection is seleted on the 1st picker', function () { ({drp, picker0, picker1} = createDRP(elem)); [viewSwitch0, nextBtn0] = getParts(picker0, ['.view-switch', '.next-btn']); viewSwitch1 = picker1.querySelector('.view-switch'); drp.datepickers[1].show(); getCells(picker1)[16].click(); drp.datepickers[1].hide(); drp.datepickers[0].show(); expect(viewSwitch0.textContent, 'to equal', 'February 2020'); nextBtn0.click(); expect(viewSwitch0.textContent, 'to equal', 'March 2020'); getCells(picker0)[9].click(); cells0 = getCells(picker0); cells1 = getCells(picker1); expect(drp.dates, 'to equal', [dateValue(2020, 1, 11), dateValue(2020, 2, 10)]); expect(input0.value, 'to be', '02/11/2020'); expect(viewSwitch0.textContent, 'to equal', 'February 2020'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range-end'), 'to equal', []); expect(filterCells(cells0, '.range'), 'to equal', cells0.slice(17)); expect(filterCells(cells0, '.focused'), 'to equal', [cells0[16]]); expect(input1.value, 'to be', '03/10/2020'); expect(viewSwitch1.textContent, 'to equal', 'March 2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[9]]); expect(filterCells(cells1, '.range-start'), 'to equal', []); expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[9]]); expect(filterCells(cells1, '.range'), 'to equal', cells1.slice(0, 9)); expect(filterCells(cells1, '.focused'), 'to equal', [cells1[9]]); drp.destroy(); input0.value = ''; input1.value = ''; }); it('dates are swapped if a date earlier than the 1st picker\'s selection is seleted on the 2nd picker', function () { let prevBtn1; ({drp, picker0, picker1} = createDRP(elem)); [viewSwitch0, nextBtn0] = getParts(picker0, ['.view-switch', '.next-btn']); [viewSwitch1, prevBtn1] = getParts(picker1, ['.view-switch', '.prev-btn']); drp.datepickers[0].show(); nextBtn0.click(); getCells(picker0)[9].click(); drp.datepickers[0].hide(); drp.datepickers[1].show(); expect(viewSwitch1.textContent, 'to equal', 'March 2020'); prevBtn1.click(); expect(viewSwitch1.textContent, 'to equal', 'February 2020'); getCells(picker1)[16].click(); cells0 = getCells(picker0); cells1 = getCells(picker1); expect(drp.dates, 'to equal', [dateValue(2020, 1, 11), dateValue(2020, 2, 10)]); expect(input0.value, 'to be', '02/11/2020'); expect(viewSwitch0.textContent, 'to equal', 'February 2020'); expect(filterCells(cells0, '.selected'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[16]]); expect(filterCells(cells0, '.range-end'), 'to equal', []); expect(filterCells(cells0, '.range'), 'to equal', cells0.slice(17)); expect(filterCells(cells0, '.focused'), 'to equal', [cells0[16]]); expect(input1.value, 'to be', '03/10/2020'); expect(viewSwitch1.textContent, 'to equal', 'March 2020'); expect(filterCells(cells1, '.selected'), 'to equal', [cells1[9]]); expect(filterCells(cells1, '.range-start'), 'to equal', []); expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[9]]); expect(filterCells(cells1, '.range'), 'to equal', cells1.slice(0, 9)); expect(filterCells(cells1, '.focused'), 'to equal', [cells1[9]]); drp.destroy(); input0.value = ''; input1.value = ''; }); }); });