Skip to content

Commit

Permalink
fix(date-picker): check properties on first render of calendar (#18019)
Browse files Browse the repository at this point in the history
  • Loading branch information
@annawen1
annawen1 authored Nov 11, 2024
1 parent 664408d commit 8713091
Showing 1 changed file with 124 additions and 70 deletions.
194 changes: 124 additions & 70 deletions packages/web-components/src/components/date-picker/date-picker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,93 @@ class CDSDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
);
};

/**
* Sets calendar options
* @param property property to set
* @param calendar calendar object
*/
private _setCalendar(property, calendar) {
const { disabled, dateFormat, open, readonly, minDate, maxDate, value } =
this;

const { selectorInputFrom, selectorInputTo } = this
.constructor as typeof CDSDatePicker;
const inputFrom = this.querySelector(
selectorInputFrom
) as CDSDatePickerInput;
const inputTo = this.querySelector(selectorInputTo) as CDSDatePickerInput;

if (property === 'dateFormat') {
calendar.set({ dateFormat });
}
if (property === 'date') {
if (!parseISODateString(minDate)) {
// Allows empty start/end
throw new Error(
`Wrong date format found in \`minDate\` property: ${minDate}`
);
}
if (!parseISODateString(maxDate)) {
// Allows empty start/end
throw new Error(
`Wrong date format found in \`maxDate\` property: ${maxDate}`
);
}
if (minDate && maxDate && minDate > maxDate) {
throw new Error(
`\`maxDate\` property, shouldn't be smaller than the \`minDate\` property. You have: minDate: ${minDate}, maxDate: ${maxDate}`
);
}
calendar.set({ minDate, maxDate });
}
if (property === 'open') {
if (open && !readonly) {
calendar.open();
} else {
calendar.close();
}
}
if (property === 'disabled') {
[inputFrom, inputTo].forEach((input) => {
if (input) {
input.disabled = disabled;
input.readonly = readonly;
}
});
}
if (property === 'value') {
const dates = value
.split('/')
.filter(Boolean)
.map((item) => parseISODateString(item));
if (dates.some((item) => isNaN(Number(item)))) {
throw new Error(
`Wrong date format found in \`value\` property: ${value}`
);
}
const [startDate, endDate] = dates;
if (startDate && endDate && startDate > endDate) {
throw new Error(
`In \`value\` property, the end date shouldn't be smaller than the start date. You have: ${value}`
);
}
if (calendar) {
calendar.setDate(dates);
[inputFrom, inputTo].forEach((input, i) => {
if (input) {
input.value = !dates[i]
? ''
: calendar.formatDate(
new Date(dates[i]),
calendar.config.dateFormat
);
}
});
}
}
return calendar;
}

/**
* Instantiates Flatpickr.
*
Expand All @@ -290,6 +377,37 @@ class CDSDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
this._datePickerOptions
);
}

const {
calendar,
disabled,
dateFormat,
open,
readonly,
minDate,
maxDate,
value,
} = this;

if (dateFormat) {
this._setCalendar('dateFormat', calendar);
}

if (minDate || maxDate) {
this._setCalendar('date', calendar);
}

if (open) {
this._setCalendar('open', calendar);
}

if (disabled || readonly) {
this._setCalendar('disabled', calendar);
}
if (value) {
this._setCalendar('value', calendar);
}

return this.calendar;
}

Expand Down Expand Up @@ -400,89 +518,25 @@ class CDSDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
}

updated(changedProperties) {
const { calendar, disabled, open, readonly } = this;
const { selectorInputFrom, selectorInputTo } = this
.constructor as typeof CDSDatePicker;
const inputFrom = this.querySelector(
selectorInputFrom
) as CDSDatePickerInput;
const inputTo = this.querySelector(selectorInputTo) as CDSDatePickerInput;
const { calendar } = this;
if (calendar && changedProperties.has('dateFormat')) {
const { dateFormat } = this;
calendar.set({ dateFormat });
this._setCalendar('dateFormat', calendar);
}
if (changedProperties.has('minDate') || changedProperties.has('maxDate')) {
const { minDate, maxDate } = this;
if (!parseISODateString(minDate)) {
// Allows empty start/end
throw new Error(
`Wrong date format found in \`minDate\` property: ${minDate}`
);
}
if (!parseISODateString(maxDate)) {
// Allows empty start/end
throw new Error(
`Wrong date format found in \`maxDate\` property: ${maxDate}`
);
}
if (minDate && maxDate && minDate > maxDate) {
throw new Error(
`\`maxDate\` property, shouldn't be smaller than the \`minDate\` property. You have: minDate: ${minDate}, maxDate: ${maxDate}`
);
}
if (calendar) {
calendar.set({ minDate, maxDate });
}
this._setCalendar('date', calendar);
}

if (changedProperties.has('open') && calendar) {
if (open && !readonly) {
calendar.open();
} else {
calendar.close();
}
this._setCalendar('open', calendar);
}
if (
changedProperties.has('disabled') ||
changedProperties.has('readonly')
) {
[inputFrom, inputTo].forEach((input) => {
if (input) {
input.disabled = disabled;
input.readonly = readonly;
}
});
this._setCalendar('disabled', calendar);
}
if (changedProperties.has('value')) {
const { value } = this;
const dates = value
.split('/')
.filter(Boolean)
.map((item) => parseISODateString(item));
if (dates.some((item) => isNaN(Number(item)))) {
throw new Error(
`Wrong date format found in \`value\` property: ${value}`
);
}
const [startDate, endDate] = dates;
if (startDate && endDate && startDate > endDate) {
throw new Error(
`In \`value\` property, the end date shouldn't be smaller than the start date. You have: ${value}`
);
}
if (calendar) {
calendar.setDate(dates);
[inputFrom, inputTo].forEach((input, i) => {
if (input) {
input.value = !dates[i]
? ''
: calendar.formatDate(
new Date(dates[i]),
calendar.config.dateFormat
);
}
});
}
this._setCalendar('value', calendar);
}
}

Expand Down

0 comments on commit 8713091

Please sign in to comment.