[Date Picker] Behavior improvements and bug fixes

[Devessier]

Here is a list of identified flaws:

• The selected date randomly changes
• The Month and Year selects do not change the selected date
• Clicking on the left and right arrows shouldn't change the selected date but only show the previous or next month
• Selecting a month or a year shouldn't change the selected date but change the displayed month

These bugs also affect FormDateTimeFieldInput and FormDateFieldInput.

Bug: The selected date randomly changes

CleanShot.2025-01-09.at.13.07.44.mp4

This is likely a timezone or date truncation issue. We would have to dive deeper.

Bug: The Month and Year selects do not work

CleanShot.2025-01-09.at.13.09.13.mp4

As @muraliSingh7 explained, a click-outside listener closes the date inputs before a month or year is selected. See twentyhq/core-team-issues#88.

Improvement: The selects and buttons in <AbsoluteDatePickerHeader /> should only update the displayed month, not the selected date

CleanShot.2025-01-09.at.13.10.14.mp4

See how Notion behaves:

CleanShot.2025-01-09.at.15.19.05.mp4

The <AbsoluteDatePickerHeader /> component takes onAddMonth and onSubtractMonth properties.

The library react-datepicker library supports doing that. See the code snippet below. We would have to have two separate dates. A "temporary" date, provided by ReactDatePicker and updated with the changeYear and increaseMonth functions; and the "selected" date, which is the one currently stored in the backend and used as the input's value.

<ReactDatePicker
  renderCustomHeader={({
    date,
    changeYear,
    changeMonth,
    increaseMonth,
    decreaseMonth,
    prevMonthButtonDisabled,
    nextMonthButtonDisabled,
  }) =>
    isRelative ? (
      <RelativeDatePickerHeader
        direction={relativeDate?.direction ?? 'PAST'}
        amount={relativeDate?.amount}
        unit={relativeDate?.unit ?? 'DAY'}
        onChange={onRelativeDateChange}
      />
    ) : (
      <AbsoluteDatePickerHeader
        date={internalDate}
        temporaryDate={date}
        onChange={onChange}
        onChangeMonth={changeMonth}
        onChangeYear={changeYear}
        onAddMonth={increaseMonth}
        onSubtractMonth={decreaseMonth}
        prevMonthButtonDisabled={prevMonthButtonDisabled}
        nextMonthButtonDisabled={nextMonthButtonDisabled}
        isDateTimeInput={isDateTimeInput}
        timeZone={timeZone}
        hideInput={hideHeaderInput}
      />
    )
  }
/>