diff --git a/src/components/input-date-picker/input-date-picker.stories.ts b/src/components/input-date-picker/input-date-picker.stories.ts
index 7e742b5eed3..31ab8c82098 100644
--- a/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/src/components/input-date-picker/input-date-picker.stories.ts
@@ -31,8 +31,6 @@ export const range = (): string => html`
@@ -809,16 +765,6 @@ export class InputDatePicker
this.setReferenceEl();
};
- @Watch("start")
- startWatcher(start: string): void {
- this.startAsDate = dateFromISO(start);
- }
-
- @Watch("end")
- endWatcher(end: string): void {
- this.endAsDate = end ? setEndOfDay(dateFromISO(end)) : dateFromISO(end);
- }
-
@Watch("effectiveLocale")
private async loadLocaleData(): Promise {
if (!Build.isBrowser) {
@@ -849,21 +795,15 @@ export class InputDatePicker
};
private shouldFocusRangeStart(): boolean {
- return !!(
- this.endAsDate &&
- !this.startAsDate &&
- this.focusedInput === "end" &&
- this.startInput
- );
+ const startValue = this.value[0] || undefined;
+ const endValue = this.value[1] || undefined;
+ return !!(endValue && !startValue && this.focusedInput === "end" && this.startInput);
}
private shouldFocusRangeEnd(): boolean {
- return !!(
- this.startAsDate &&
- !this.endAsDate &&
- this.focusedInput === "start" &&
- this.endInput
- );
+ const startValue = this.value[0] || undefined;
+ const endValue = this.value[1] || undefined;
+ return !!(startValue && !endValue && this.focusedInput === "start" && this.endInput);
}
private handleDateRangeChange = (event: CustomEvent): void => {
@@ -887,12 +827,18 @@ export class InputDatePicker
private localizeInputValues(): void {
const date = dateFromRange(
- this.range ? this.startAsDate : this.valueAsDate,
+ (this.range
+ ? (Array.isArray(this.valueAsDate) && this.valueAsDate[0]) || undefined
+ : this.valueAsDate) as Date,
this.minAsDate,
this.maxAsDate
);
const endDate = this.range
- ? dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
+ ? dateFromRange(
+ (Array.isArray(this.valueAsDate) && this.valueAsDate[1]) || undefined,
+ this.minAsDate,
+ this.maxAsDate
+ )
: null;
const localizedDate =
@@ -935,8 +881,6 @@ export class InputDatePicker
this.userChangedValue = true;
this.value = newValue;
this.valueAsDate = newValue ? getValueAsDateRange(newValue) : undefined;
- this.start = newStartDateISO;
- this.end = newEndDateISO;
const eventDetail = {
startDate: newStartDate as Date,