{
if (opts.isEndRange) {
arr.push('is-endrange');
}
+ if (opts.isDateRange) {
+ arr.push('is-daterange');
+ }
return (
`| ` +
`` +
@@ -839,7 +936,11 @@ export class Datepicker extends Component {
.substr(0, 2);
for (let c = 0; c < 1; c++) {
- this._renderDateDisplay();
+ if(!this.options.isDateRange) {
+ this._renderDateDisplay(this.date);
+ } else {
+ this._renderDateDisplay(this.date, this.endDate);
+ }
html +=
this.renderTitle(
this,
@@ -904,37 +1005,37 @@ export class Datepicker extends Component {
this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel');
this.formats = {
- d: () => {
- return this.date.getDate();
+ d: (date: Date) => {
+ return date.getDate();
},
- dd: () => {
- let d = this.date.getDate();
+ dd: (date: Date) => {
+ let d = date.getDate();
return (d < 10 ? '0' : '') + d;
},
- ddd: () => {
- return this.options.i18n.weekdaysShort[this.date.getDay()];
+ ddd: (date: Date) => {
+ return this.options.i18n.weekdaysShort[date.getDay()];
},
- dddd: () => {
- return this.options.i18n.weekdays[this.date.getDay()];
+ dddd: (date: Date) => {
+ return this.options.i18n.weekdays[date.getDay()];
},
- m: () => {
- return this.date.getMonth() + 1;
+ m: (date: Date) => {
+ return date.getMonth() + 1;
},
- mm: () => {
- let m = this.date.getMonth() + 1;
+ mm: (date: Date) => {
+ let m = date.getMonth() + 1;
return (m < 10 ? '0' : '') + m;
},
- mmm: () => {
- return this.options.i18n.monthsShort[this.date.getMonth()];
+ mmm: (date: Date) => {
+ return this.options.i18n.monthsShort[date.getMonth()];
},
- mmmm: () => {
- return this.options.i18n.months[this.date.getMonth()];
+ mmmm: (date: Date) => {
+ return this.options.i18n.months[date.getMonth()];
},
- yy: () => {
- return ('' + this.date.getFullYear()).slice(2);
+ yy: (date: Date) => {
+ return ('' + date.getFullYear()).slice(2);
},
- yyyy: () => {
- return this.date.getFullYear();
+ yyyy: (date: Date) => {
+ return date.getFullYear();
}
};
}
@@ -944,19 +1045,27 @@ export class Datepicker extends Component {
this.el.removeEventListener('keydown', this._handleInputKeydown);
this.el.removeEventListener('change', this._handleInputChange);
this.calendarEl.removeEventListener('click', this._handleCalendarClick);
+ if (this.options.isDateRange) {
+ this.endDateEl.removeEventListener('click', this._handleInputClick);
+ this.endDateEl.removeEventListener('keypress', this._handleInputKeydown);
+ this.endDateEl.removeEventListener('change', this._handleInputChange);
+ }
}
_handleInputClick = (e) => {
// Prevents default browser datepicker modal rendering
- if(this.el.type == 'date') {
+ if(e.type == 'date') {
e.preventDefault()
}
+ this.setDateFromInput(e.target as HTMLInputElement);
this.open();
+ 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();
}
}
@@ -970,13 +1079,20 @@ export class Datepicker extends Component {
!target.classList.contains('is-empty') &&
!target.parentElement.classList.contains('is-disabled')
) {
- this.setDate(
- new Date(
- e.target.getAttribute('data-year'),
- e.target.getAttribute('data-month'),
- e.target.getAttribute('data-day')
- )
+ const selectedDate = new Date(
+ e.target.getAttribute('data-year'),
+ e.target.getAttribute('data-month'),
+ e.target.getAttribute('data-day')
);
+
+ if (!this.multiple) {
+ this._handleSingleDateCalendarClick(selectedDate);
+ }
+
+ if (this.options.isDateRange) {
+ this._handleDateRangeCalendarClick(selectedDate);
+ }
+
if (this.options.autoClose) {
this._finishSelection();
}
@@ -990,12 +1106,35 @@ 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.date = null;
- this.setInputValue();
+ this._clearDates();
+ this.setInputValues();
this.close();
}
+ _clearDates = () => {
+ this.date = null;
+ this.endDate = null;
+ }
+
_handleMonthChange = (e) => {
this.gotoMonth(e.target.value);
}
@@ -1022,21 +1161,25 @@ export class Datepicker extends Component {
_handleInputChange = (e: Event) => {
let date;
+ const el = (e.target as HTMLElement);
// Prevent change event from being fired when triggered by the plugin
if (e['detail']?.firedBy === this) return;
+ // Prevent change event from being fired if an end date is set without a start date
+ if(el == this.endDateEl && !this.date) return;
if (this.options.parse) {
- date = this.options.parse(this.el.value,
+ date = this.options.parse((e.target as HTMLInputElement).value,
typeof this.options.format === "function"
? this.options.format(new Date(this.el.value))
: this.options.format);
}
else {
- date = new Date(Date.parse(this.el.value));
+ date = new Date(Date.parse((e.target as HTMLInputElement).value));
}
if (Datepicker._isDate(date)) {
- this.setDate(date);
- if (this.el.type == 'date') {
- this.setDataDate();
+ this.setDate(date, false, el == this.endDateEl);
+ if (e.type == 'date') {
+ this.setDataDate(e, date);
+ this.setInputValues();
}
}
}
@@ -1051,7 +1194,7 @@ export class Datepicker extends Component {
// Set input value to the selected date and close Datepicker
_finishSelection = () => {
- this.setInputValue();
+ this.setInputValues();
this.close();
}
|