@rehookify/datepicker 6.0.0

Offsets Revolution

on Node.js NPM

🤔 API Changes:

• ❗️selectedDates and onDatesChange are mandatory in the configuration types
• 🗑️ remove months and years actions
• 🗑️ remove next/previous month from the useMonthsPropGetters

🆕 New API:

• you can pass offsetDate and onOffsetChange to config. It will allow you to manipulate offsetDate outside of hooks (inputs, buttons, etc.)
• add useDatePickerOffsetPropGetters to manipulate offsetDate both internal and external

Motivation

There were a lot of requests with offsetDate manipulations outside of the lib, for example, integration with 3rd party, inputs, buttons, etc.
It demands moving offsetDate outside the internal reducer and updating the internal state based on the config prop.
Also, previousMonthButton and nextMonthButton are not actually a month functionality but an offset manipulation with the month limit. So we are introducing a new hook that will help to manipulate date-picker offset useDatePickerOffsetPropGetters.
Actions were introduced to cover cases when propGetters can't help but with new offset functionality, they are considered useless.

Realisation

• External offsetDate
  Now you can pass offsetDate and onOffsetChange to the config

// you can put any date here
const [offsetDate, onOffsetChange] = useState<Date>(new Date())
const [selectedDates, onDatesChange] = useState<Date[]>([])

const { calendars } = useDatePicker({
  selectedDates,
  onDatesChange,
  offsetDates,
  onDatesChange,
 // other configuration
})

📝 - you need to pass both offsetDate and onOffsetChange otherwise it will use internal offsetDate

• New useDatePickerOffsetPropGetters hook to change offsetDate

interface DPOffsetValue {
  days?: number;
  months?: number;
  years?: number;
}

type DPUseDatePickerOffsetPropGetters = (state: DPState) => {
  addOffset: (
    offsetValue: DPOffsetValue,
    config?: DPPropsGetterConfig,
  ) => DPPropGetter;
  setOffset: (date: Date) => DPPropGetter;
  subtractOffset: (
    offsetValue: DPOffsetValue,
    config?: DPPropsGetterConfig,
  ) => DPPropGetter;
};

We can get setOffset, addOffset and subtractOffset prop-getters from the new hook.
With new addOffset and subtractOffset you are not limited only by month and can change offset based on days, months and years or all of them

Old use example

const { previousMonthButton } = useMonthsPropGetters(dpState)

return (
  <button {...previousMonthButton()}>Previous Month</button>
)

it will change only by one month

New use example

const { subtractOffset } = useDatePickerOffsetPropGetters(dpState);

return (
  <button {...subtractOffset({ days: 2, months: 3, years: 1 })}>Previous period</button>
)

it will change offset for 2 days, 3 months and 1 year before current offsetDate

The new setOffset method will help you to change the date-picker offset to the exact date with a check for min and max dates.