date format value is not supported by shortcuts

[dlikhten]

The datepicker will only use the default date format (YYYY-MM-DD) when using shortcuts (config) rather than the date format provided to the component. This causes issues with at a minimum the onChange callback.

Example:

<Datepicker displayFormat="MM/DD/YYYY" config={{shortcuts: { today: "Today"}}} />

typically onChange will receive dates in the format of MM/DD/YYYY but if a shortcut is used, it will come in as YYYY-MM-DD. Furthermore when the shortcut is provided a date in the MM/DD/YYYY format, it cannot accept it, and only accepts standard date formats as input.

(bonus problem) the text set into the input field is initially set ignoring asSingle / useRange options.

Current workaround (causes a flicker since it still tries to set the value ignoring the asSingle / useRange options)

const handleDatepickerValueChange = useCallback(
    (newValue: DateValueType) => {
      const p1 = parseDate(newValue?.startDate, displayFormat);
      const pUse = p1.isValid() ? p1 : parseISO(newValue?.startDate);
      onChange(pUse.isValid() ? newValue?.startDate || '' : '');
    },
    [displayFormat, onChange]
  );

[onesine]

Hi @dlikhten 👋

Thanks for your feedback.

The datepicker internally uses several date formats for its operation. But we only return the YYYY-MM-DD format in the onChange. This format is returned whether or not shortcuts are used.

For information, we use daysjs parsing for all dates supplied to the datepicker. This means that even if you supply the selector with a different format than the one we return, if it's valid we'll use it.

I think it's similar for shortcuts. We can't handle all the date formats sent as input to the shortcut. But nevertheless, we use parsing with dayjs. Any date that dayjs can parse will work. As an example, you can use the standard format(YYYY-MM-DD) or even the Javascript date object.

Finally, displayFormat simply displays the date in a particular format for the user.

I don't quite understand the bonus problem.

[dlikhten]

The bonus is that when you have a single-date component (only select 1 date) the text when setting is a single date. HOWEVER when using a shortcut, the date is always set to a range in the text input after selecting the shortcut.

I'll get more detailed info tomorrow.

Actually after reading the other issues I realized I made my own onChange handler, not using the one the component triggers because without my own, I can't know if there are validation errors, so I couldn't build the needed form experience. That could be why the raw value I am getting wasn't respecting the format...

I will validate about the range issue, I think there's still a problem there.

[dlikhten]

I confirmed, the issue with the onChange being called with the custom format is due to me having a manual change listener. Ideally I should only be listening to the onChange event the component throws if it provided events for invalid dates too so we could react accordingly. Even if the callback was "onInvalid". In any case this issue might be moot given that it may be because of my side-binding of events. Apologies for wasting your time.