-
+ November 2018 Sunday
+
|
-
+ November 2018 Monday
+
|
-
+ November 2018 Tuesday
+
|
-
+ November 2018 Wednesday
+
|
-
+ November 2018 Thursday
+
|
-
+ November 2018 Friday
+
|
-
+ December 2018 Saturday
+
|
-
+ December 2018 Sunday
+
|
-
+ December 2018 Monday
+
|
-
+ December 2018 Tuesday
+
|
-
+ December 2018 Wednesday
+
|
-
+ December 2018 Thursday
+
|
-
+ December 2018 Friday
+
|
-
+ December 2018 Saturday
+
|
-
+ December 2018 Sunday
+
|
-
+ December 2018 Monday
+
|
-
+ December 2018 Tuesday
+
|
-
+ December 2018 Wednesday
+
|
-
+ December 2018 Thursday
+
|
-
+ December 2018 Friday
+
|
-
+ December 2018 Saturday
+
|
-
+ December 2018 Sunday
+
|
-
+ December 2018 Monday
+
|
-
+ December 2018 Tuesday
+
|
-
+ December 2018 Wednesday
+
|
-
+ December 2018 Thursday
+
|
-
+ December 2018 Friday
+
|
-
+ December 2018 Saturday
+
|
-
+ December 2018 Sunday
+
|
-
+ December 2018 Monday
+
|
-
+ December 2018 Tuesday
+
|
-
+ December 2018 Wednesday
+
|
-
+ December 2018 Thursday
+
|
-
+ December 2018 Friday
+
|
-
+ December 2018 Saturday
+
|
-
+ December 2018 Sunday
+
|
-
+ December 2018 Monday
+
|
-
+ January 2019 Tuesday
+
|
-
+ January 2019 Wednesday
+
|
-
+ January 2019 Thursday
+
|
-
+ January 2019 Friday
+
|
-
+ January 2019 Saturday
+
|
diff --git a/packages/ui/components/calendar/types/day.ts b/packages/ui/components/calendar/types/day.ts
index ec988c95b2..22e0158ca9 100644
--- a/packages/ui/components/calendar/types/day.ts
+++ b/packages/ui/components/calendar/types/day.ts
@@ -14,6 +14,7 @@ export declare interface Day {
tabindex?: string;
ariaPressed?: string;
ariaCurrent?: string | undefined;
+ disabledInfo?: string | undefined;
}
export declare interface Week {
diff --git a/packages/ui/components/input-datepicker/src/LionInputDatepicker.js b/packages/ui/components/input-datepicker/src/LionInputDatepicker.js
index d32569d272..ddf1b60aea 100644
--- a/packages/ui/components/input-datepicker/src/LionInputDatepicker.js
+++ b/packages/ui/components/input-datepicker/src/LionInputDatepicker.js
@@ -96,10 +96,28 @@ export class LionInputDatepicker extends ScopedElementsMixin(
__calendarDisableDates: {
attribute: false,
+ type: Array,
},
};
}
+ _inputFormatter = new Intl.DateTimeFormat('en-US', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ }).formatToParts;
+
+ /**
+ * @param {Date} date
+ */
+ // eslint-disable-next-line class-methods-use-this
+ _formatDate(date) {
+ const day = String(date.getDate()).padStart(2, '0');
+ const month = String(date.getMonth() + 1).padStart(2, '0');
+ const year = String(date.getFullYear());
+ return `${day}/${month}/${year}`;
+ }
+
get slots() {
return {
...super.slots,
@@ -346,6 +364,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(
}
/**
+ * Triggered when a user selects a date from the calendar overlay
* @param {{ target: { selectedDate: Date }}} opts
*/
_onCalendarUserSelectedChanged({ target: { selectedDate } }) {
@@ -355,8 +374,21 @@ export class LionInputDatepicker extends ScopedElementsMixin(
if (this._syncOnUserSelect) {
// Synchronize new selectedDate value to input
this._isHandlingUserInput = true;
- this._isHandlingCalendarUserInput = true;
- this.modelValue = selectedDate;
+
+ if (
+ Array.isArray(this.__calendarDisableDates) &&
+ this.__calendarDisableDates.includes(selectedDate)
+ ) {
+ // If the selected date is disabled, reset the values
+ this.value = '';
+ this.formattedValue = '';
+ this.modelValue = undefined;
+ } else {
+ this.formattedValue = this._formatDate(selectedDate);
+ this.value = this.formattedValue;
+ this.modelValue = selectedDate;
+ }
+
this._isHandlingUserInput = false;
this._isHandlingCalendarUserInput = false;
}