diff --git a/.changeset/chilly-rockets-breathe.md b/.changeset/chilly-rockets-breathe.md new file mode 100644 index 0000000000..8486b37465 --- /dev/null +++ b/.changeset/chilly-rockets-breathe.md @@ -0,0 +1,5 @@ +--- +'@sebgroup/green-core': patch +--- + +**Calendar:** Setting the time to 12.00 when selecting a date in the calendar diff --git a/.changeset/lazy-cheetahs-talk.md b/.changeset/lazy-cheetahs-talk.md new file mode 100644 index 0000000000..9304cb850b --- /dev/null +++ b/.changeset/lazy-cheetahs-talk.md @@ -0,0 +1,5 @@ +--- +'@sebgroup/green-core': patch +--- + +**Datepicker:** Set hours to 12 when setting date though spinners in the field. Fixes #1284 diff --git a/.changeset/tall-hounds-count.md b/.changeset/tall-hounds-count.md new file mode 100644 index 0000000000..a9bc521fc7 --- /dev/null +++ b/.changeset/tall-hounds-count.md @@ -0,0 +1,5 @@ +--- +'@sebgroup/green-core': patch +--- + +**Calendar:** Only disable dates that fall fully before or after the min/max setting diff --git a/libs/core/src/components/calendar/calendar.ts b/libs/core/src/components/calendar/calendar.ts index 23aa0ab73c..9be09f3c11 100644 --- a/libs/core/src/components/calendar/calendar.ts +++ b/libs/core/src/components/calendar/calendar.ts @@ -12,6 +12,7 @@ import { subMonths, addMonths, lastDayOfMonth, + setHours, } from 'date-fns' import { GdsElement } from '../../gds-element' @@ -246,10 +247,15 @@ export class GdsCalendar extends GdsElement { ...customization, } - const isOutsideCurrentMonth = - !isSameMonth(this.focusedDate, day) || - day < this.min || - day > this.max + const isOutsideCurrentMonth = !isSameMonth( + this.focusedDate, + day, + ) + + const isOutsideMinMax = + (day < this.min || day > this.max) && + !isSameDay(day, this.min) && + !isSameDay(day, this.max) const isWeekend = day.getDay() === 0 || day.getDay() === 6 @@ -257,6 +263,7 @@ export class GdsCalendar extends GdsElement { const isDisabled = displayOptions.disabled || isOutsideCurrentMonth || + isOutsideMinMax || (this.disabledWeekends && isWeekend) const shouldRenderBlank = @@ -316,11 +323,14 @@ export class GdsCalendar extends GdsElement { } #setSelectedDate(date: Date) { - this.value = date + // Set the time to midday to avoid timezone issues + const dateOnMidDay = setHours(date, 12) + + this.value = dateOnMidDay this.dispatchEvent( new CustomEvent('change', { - detail: date, + detail: dateOnMidDay, bubbles: false, composed: false, }), diff --git a/libs/core/src/components/datepicker/datepicker.ts b/libs/core/src/components/datepicker/datepicker.ts index 7915f80698..5a36c53ec3 100644 --- a/libs/core/src/components/datepicker/datepicker.ts +++ b/libs/core/src/components/datepicker/datepicker.ts @@ -676,6 +676,7 @@ export class GdsDatepicker extends GdsFormControlElement { newDate.setFullYear(parseInt(this.#spinnerState.year)) newDate.setMonth(parseInt(this.#spinnerState.month) - 1) newDate.setDate(parseInt(this.#spinnerState.day)) + newDate.setHours(12, 0, 0, 0) if (newDate.toString() === 'Invalid Date') return