diff --git a/src/datepicker.ts b/src/datepicker.ts index 1478b8fcc0..57a3839b87 100644 --- a/src/datepicker.ts +++ b/src/datepicker.ts @@ -261,6 +261,7 @@ export class Datepicker extends Component { id: string; /** If the picker is open. */ isOpen: boolean; + multiple: boolean = false; modal: Modal; calendarEl: HTMLElement; /** CLEAR button instance. */ @@ -324,6 +325,7 @@ export class Datepicker extends Component { this.gotoDate(new Date()); } if (this.options.isDateRange) { + this.multiple = true; let defEndDate = this.options.defaultEndDate; if(Datepicker._isDate(defEndDate)) { @@ -370,6 +372,9 @@ export class Datepicker extends Component { return day === 0 || day === 6; } + /** + * @deprecated since it does nothing as it's only updating the encapsulated variable (no return/global param change) + */ static _setToStartOfDay(date) { if (Datepicker._isDate(date)) date.setHours(0, 0, 0, 0); } @@ -486,6 +491,14 @@ export class Datepicker extends Component { return formattedDate; } + /** + * Sets date from input field. + */ + setDateFromInput(el: HTMLInputElement) { + const date = new Date(Date.parse(el.value)); + this.setDate(date, false, el == this.endDateEl); + } + /** * Set a date on the datepicker. * @param date Date to set on the datepicker. @@ -574,7 +587,6 @@ export class Datepicker extends Component { /** * Change date view to a specific date on the datepicker. * @param date Date to show on the datepicker. - * @param endDate */ gotoDate(date: Date) { let newCalendar = true; @@ -1047,12 +1059,14 @@ export class Datepicker extends Component { e.preventDefault() } this.open(); + this.setDateFromInput(e.target as HTMLInputElement); this.gotoDate((e.target) === this.el ? this.date : this.endDate); } _handleInputKeydown = (e: KeyboardEvent) => { if (Utils.keys.ENTER.includes(e.key)) { e.preventDefault(); + this.setDateFromInput(e.target as HTMLInputElement); this.open(); } } @@ -1072,34 +1086,17 @@ export class Datepicker extends Component { e.target.getAttribute('data-day') ); - if (this.endDate == null || !Datepicker._compareDates(selectedDate, this.endDate)) { - if ( - Datepicker._isDate(this.date) && - this.options.isDateRange && - Datepicker._comparePastDate(selectedDate, this.date) - ) { - return; - } - - this.setDate( - selectedDate, - false, - Datepicker._isDate(this.date) && this.options.isDateRange - ); - - if (this.options.autoClose) { - this._finishSelection(); - } - - return; + if (!this.multiple) { + this._handleSingleDateCalendarClick(selectedDate); } - if (!this.options.isDateRange) { - return; + if (this.options.isDateRange) { + this._handleDateRangeCalendarClick(selectedDate); } - this._clearDates(); - this.draw(); + if (this.options.autoClose) { + this._finishSelection(); + } } else if (target.closest('.month-prev')) { this.prevMonth(); @@ -1110,6 +1107,24 @@ export class Datepicker extends Component { } } + _handleSingleDateCalendarClick = (date: Date) => { + this.setDate(date); + } + + _handleDateRangeCalendarClick = (date: Date) => { + if (this.endDate == null || !Datepicker._compareDates(date, this.endDate)) { + if (Datepicker._isDate(this.date) && Datepicker._comparePastDate(date, this.date)) { + return; + } + + this.setDate(date, false, Datepicker._isDate(this.date)); + return; + } + + this._clearDates(); + this.draw(); + } + _handleClearClick = () => { this._clearDates(); this.setInputValues();