@dropdown-datepicker/react NPM

@dropdown-datepicker/react

A fully customizable dropdown-based date picker component for React, built on top of @dropdown-datepicker/core.

This component provides a highly flexible way to select dates using separate dropdowns for day, month, and year. Perfect for forms, age input, or anywhere a full calendar is overkill.

✨ Features

Separate dropdowns for day, month, and year
Customizable formats, labels, order, and styling
Age-based limits (minAge, maxAge)
Locale support and label customization
Min/max date constraints
Purely functional and easy to style

📦 Installation

npm install @dropdown-datepicker/react
# or
pnpm add @dropdown-datepicker/react

🧠 Usage

import React from "react";
import DropdownDatepicker from "@dropdown-datepicker/react";

function Example() {
    return (
        <DropdownDatepicker
            initialDate={new Date("2000-01-01")}
            onChange={(date) => console.log("Selected date:", date)}
            yearRange={[1950, 2025]}
            dateOrder={["day", "month", "year"]}
            monthFormat="short"
            allowPast={true}
            allowFuture={false}
            minAge={18}
            containerClassName="flex gap-2"
            selectClassName="border px-2 py-1 rounded"
            labelMap={{ day: "Day", month: "Month", year: "Year" }}
            showLabel={true}
        />
    );
}

🧩 Props

Prop	Type	Description
`initialDate`	`Date`	The starting selected date.
`onChange`	`(date: Date) => void`	Callback when full date is selected.
`onDayChange`	`(day: number) => void`	Callback for day dropdown change.
`onMonthChange`	`(month: number) => void`	Callback for month dropdown change.
`onYearChange`	`(year: number) => void`	Callback for year dropdown change.
`yearRange`	`[number, number]`	Min and max year range for the year dropdown. Default: `[1900, currentYear]`.
`dayFormat`	`"number" \\| "ordinal"`	Format for day values. `"ordinal"` = "1st", "2nd", etc.
`monthFormat`	`"long" \\| "short" \\| "number"`	Format for month values.
`dateOrder`	`["day", "month", "year"]`	The order of the dropdowns. You can rearrange to any combination.
`minDate`	`Date`	Minimum date allowed.
`maxDate`	`Date`	Maximum date allowed.
`allowFuture`	`boolean`	Allow selecting future dates. Default: `true`.
`allowPast`	`boolean`	Allow selecting past dates. Default: `true`.
`sortYears`	`"asc" \\| "desc"`	Whether to sort year dropdown ascending or descending.
`minAge`	`number`	Minimum age required (calculated from today).
`maxAge`	`number`	Maximum age allowed (calculated from today).
`containerClassName`	`string`	Class name for the container wrapping all dropdowns.
`selectClassName`	`string`	Class name for each `<select>` element.
`optionClassName`	`string`	Class name for each `<option>`.
`showLabel`	`boolean`	Whether to show a label before each dropdown.
`labelClassName`	`string`	Class name for each label element.
`labelMap`	`{ day?: string, month?: string, year?: string }`	Custom labels for each dropdown.
`required`	`boolean`	Add `required` attribute to selects.
`locale`	`string`	Locale used for month names and formatting. (e.g. `"en"`, `"fr"`, `"bn"`)

🌍 Locale Support

Pass the locale:

<DropdownDatepicker locale="fr" />

📸 Screenshot / Demo

Coming soon! You can build a quick demo in Storybook or CodeSandbox using the example above.

🐛 Issues

Report bugs or suggest features here:
👉 Open React Issues

📄 License

datepicker react datepicker dropdown datepicker date selector react date input day month year dropdown react component date picker calendar input

react @dropdown-datepicker/core

1.0.1

7 months ago

1.0.0

7 months ago