How does useDayPicker or useActiveModifiers work?

[wannesdebacker]

Hello

I've got a setup like this (pseudo-code).

<div class="datepicker">
  <input onChange={onInputChange}/>
  <daypicker disabledDays={[
      new Date('2023-12-04T06:00:00.000Z'),
      new Date('2023-12-05T06:00:00.000Z'),
      new Date('2023-12-07T06:00:00.000Z'),
    ]} onChange={onDayPickerChange}
  />
</div>

I want to get the modifiers of the daypicker onInputChange (to access them somewhere).

I want to get access to the modifiers of the daypicker (selected, disabled, ...). And i thought useActiveModifiers can be used for that? But your documentation does not have examples and is pretty bare so almost nothing get's explained.

Can I find any more information about the hooks, or the RootProvider and it's purpose, or anything.

[gpbl]

@wannesdebacker if I understand correctly, you want to know the modifiers of the date entered in the input field (e.g. is the typed date already selected?). Am I correct? Since you decide the logic of this modifiers, you should be able to tell by yourself in the code – without he need of the DayPicker hooks:

https://codesandbox.io/s/react-daypicker-forked-hdwwrw?file=/src/App.tsx

DayPicker hooks are for custom components. If you want for some reason use these hooks, you need to place your input field in a custom component, such a Caption or a Footer. There the hooks are accessible (you can import the original component as well):

https://codesandbox.io/s/react-daypicker-forked-gdjnxx?file=/src/App.tsx

---

Can I find any more information about the hooks, or the RootProvider and it's purpose, or anything.

Public exports are documented in https://react-day-picker.js.org/api/modules, other components such the RootProvider aren't exposed, as I don't think should be used by regular users. To know more about the internals, you need to read its source code, if something is not clear always happy to help!

[thomasmattheussen]

@gpbl So how we should migrate from ModifiersUtils from v7 in v8?

[gpbl]

@gpbl So how we should migrate from ModifiersUtils from v7 in v8?

Hi @thomasmattheussen, would you share some code samples?

[thomasmattheussen]

sure, (irrelevant parts filtered out) -->

const DatePicker = (
      onChange,
      disabledDays,
) => {
    const getModifiersForCalendarValue = calendarValue => {
      return ModifiersUtils.getModifiersForDay(calendarValue, {
        disabled: disabledDays,
      }).reduce(
        (accumulator, currentValue) => ({
          ...accumulator,
          [currentValue]: true,
        }),
        {},
      );
    };
    
    const handleInputChange = ({ target }) => {
      const newInputValue = target.value;

      // The value in the calendar
      const calendarValue = dayjs(newInputValue, format).toDate();

      // Get the modifiers active in the datepicker
      const calendarModifiers = getModifiersForCalendarValue(calendarValue);

      const options = {
        formattedDate: newInputValue,
        disabled: !!calendarModifiers.disabled,
        ...calendarModifiers,
      };

      onChange(calendarValue, options);
    };

    return (
      <div>
        <TextField
          name={name}
          onChange={handleInputChange}
          type={type}
          value={inputValue}
        />
      </div>
    );
  },
);

export default DatePicker;

[gpbl]

@thomasmattheussen I don't see how DayPicker is used there - would you please paste a more complete example with some comments explaining what is doing? Thanks

[wannesdebacker]

@gpbl I'm gonna add to this.

return (
  <div>
    <TextField
      name={name}
      onChange={handleInputChange}
      type={type}
      value={inputValue}
      ...
    />
    <CalendarDialog
      value={value}
      onDayClick={handleCalendarChange}
      modifiers={modifiers}
      ...
    />
  </div>
);

The CalendarDialog essentially acts as a wrapper around DayPicker. Moreover, the onChange function in DayPicker does return the modifiers, as depicted in the subsequent code.

const handleCalendarChange = (calendarValue, calendarModifiers) => {
  onChange(calendarValue, {
    formattedDate: formatInput(calendarValue, format),
    formattedDateIsValid: true,
    disabled: !!calendarModifiers.disabled,
    ...calendarModifiers,
   });

   handleClose();
};

However, the problem lies in the onChange function of the TextField. We've been utilizing ModifiersUtils within the TextField to track the state of the modifiers whenever the TextField changes. This allows us to confirm whether the date entered in the TextField is disabled, selected, and so on.

We employed ModifiersUtils for this purpose. Am I correct in assuming that we now need to supply this logic ourselves?

Also a codesandbox with some more explanation:

https://codesandbox.io/s/cocky-forest-fpvpvw?file=/src/App.js

[wannesdebacker]

Update on this ticket, i've written the modifiers myself, which is certainly not ideal.

[gpbl]

@wannesdebacker this is the correct way to do it. Why it is not ideal?