@rehookify/datepicker 4.0.0

v4.0.0 The Rise of Time

on Node.js NPM

❗️Breaking Changes

• range picker doesn't allow to select of the same date automatically, please add selectSameDate property to the "dates" configuration
• isToday and date properties were removed from the CalendarDay
• name replaced with month property for CalendarMonth
• value replaced with year property for CalendarYear

🕰️ Time

Starting with v4.0.0 you can add a time picker to your apps 🎉🥳
To add a time picker you can call the useTime and useTimePropGetters hooks. Of course, everything is included in the all-in-one and context solutions. Now you can change the time for each date selection.
✏️ Note: the second click won't work for trigger mode, so you need to pick select a time from the first time.
You can specify interval, minTime and maxTime for time configuration
Also, you can change the time appearance in locale configuration
Time is using focusDate and compares it with selectedDates to change. You can specify an initial focusDate in general configuration and it should match with one of selectedDates.

Example of creating time picker with a segment each 15 min from 9:00 to 18:00

import React, { useState } from 'react';
import { useDatePicker } from '@rehookify/datepicker';

export const TimePicker = () => {
  const testDate = new Date();
  const [selectedDates, onDatesChange] = useState<Date[]>([testDate]);

  const {
    data: { time },
    propGetters: { timeButton },
  } = useDatePicker({
    selectedDates,
    onDatesChange,
    focusDate: testDate,
    time: {
      interval: 15,
      minTime: { h: 9, m: 0 },
      maxTime: { h: 18, m: 0 },
    },
  });

  return (
    <ul>
      {time.map((t) => (
        <li key={t.time} {...timeButton(t)}>
          {t.time}
        </li>
      ))}
    </ul>
  );
};