DatePicker

Standalone single-date picker popover: a month grid with month / year / decade navigation views. Controlled.

When to use

Use DatePicker when you need the calendar UI on its own (e.g. inside your own popover or inline panel). For a ready-made input field with a calendar popover use DatePickerInput; inside a @uxf/form form use @uxf/form/date-picker-input.

For selecting a range rather than a single day, use DateRangePicker. There is no @uxf/form twin of DatePicker itself.

Usage

"use client";

import { DatePicker } from "@uxf/ui/date-picker";
import React, { useState } from "react";

export function BasicDatePicker() {
    const [value, setValue] = useState<Date | null>(null);

    return <DatePicker onChange={setValue} selectedDate={value} />;
}

Props

Supporting types:

type DatesConfig = { flag?: string; dates: Date[]; isDisabled?: boolean };
type MonthType = { year: number; month: number; date: Date };

type CustomButtonTitles = {
    nextMonth?: string;
    prevMonth?: string;
    nextYear?: string;
    prevYear?: string;
    nextDecade?: string;
    prevDecade?: string;
    selectMonth?: string;
    selectYear?: string;
};

ViewModeType ("month" | "year" | "decade") is also exported for typing the internal navigation views.

Variants & states

• Constrained range: set minDate / maxDate. Dates outside the window render dimmed and are non-selectable.
• Flagged / disabled dates: pass datesConfig. Each entry attaches an optional flag (CSS class hook) to dates, and isDisabled: true blocks the whole group. This is the non-deprecated replacement for unavailableDates.
• Navigation views: the popover switches between month, year and decade views; label the navigation buttons via customButtonTitles.

Requirements

Client component ("use client"). Import the required stylesheets once in your global CSS:

@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/calendar.css");
@import url("@uxf/ui/css/date-picker.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.