@uxf/datepicker v11.50.0

@uxf/datepicker

A set of React hooks to create an awesome datepicker.

Quick start

Main logic component

export const DatePicker: FC = () => {
    // prepare state to handle selected date
    const [selectedDate, setSelectedDate] = useState<OnDateChangeType>(null);

    const {
        activeMonths,
        firstDayOfWeek,
    } = useDatePicker({
        selectedDate,
        minBookingDate: new Date(),
        onDateChange: setSelectedDate,
    });

    // you can use DatePickerContext that helps you avoid passing callbacks throught components
    return (
        <DatePickerContext.Provider value={{ addPropsHere }}>
              {activeMonths.map(month => (
                    <DateRangePickerMonth
                        firstDayOfWeek={firstDayOfWeek}
                        key={`${month.year}-${month.month}`}
                        month={month.month}
                        year={month.year}
                    />
              ))}
        </DatePickerContext.Provider>
    );
};

Month component

export const DateRangePickerMonth: FC<UseMonthProps> = ({
    firstDayOfWeek,
    month,
    year,
}) => {
    const { days, monthLabel } = useMonth({
        year,
        month,
        firstDayOfWeek,
    });

    return (
        <div>
            <p>{monthLabel}</p>
            <div style={{ display: "grid" }}>
                {days.map((day, index) => {
                    return <DateRangePickerDay date={day.date} key={day.dayLabel + index} day={day.dayLabel} />;
                })}
            </div>
        </div>
    );
};

Day component

export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date }) => {
    const dayRef = useRef(null);
    const {
        focusedDate,
        isDateFocused,
        isDateSelected,
        isDateHovered,
        isDateBlocked,
        onDateSelect,
        onDateFocus,
        onDateHover,
    } = useContext(DatePickerContext);

    const { disabledDate, isSelected, isWithinHoverRange, onClick, isToday } =
        useDay<HTMLDivElement>({
            date,
            dayRef,
            focusedDate,
            isDateFocused,
            isDateSelected,
            isDateHovered,
            isDateBlocked,
            onDateFocus,
            onDateSelect,
            onDateHover,
        });

    if (!day) {
        return <div />;
    }

    return (
        <button
            type="button"
            ref={dayRef}
            onClick={onClick}
            className= {clsx({
                "day__disabled": disabledDate,
                "day__selected": isSelected,
                "day__today": isToday,
            })}
        >
            {day}
        </button>
    );
};

API

useDatePicker()

UseDatePickerProps

UseDatePickerReturnType

useDateRangePicker()

UseDateRangePickerProps

UseDateRangePickerReturnType

useDecade()

UseDecadeProps

UseDecadeReturnType

useYear()

UseYearProps

UseYearReturnType

useMonth()

UseMonthProps

UseMonthReturnType

useDay()

UseDayProps

UseDayReturnType

Known issues

• keyboard navigation doesn't work for year and decade view
• the demo needs a little more love!