Primitives

Date picker

Click the month to jump by month, again to jump by year. Names and digits follow the locale.

Date

তারিখ (bn-BD, week from Saturday)

date-picker.tsx

"use client";

import { DatePicker, Label } from "@waveinno/ui";
import * as React from "react";

export default function DatePickerDemo() {
  const [date, setDate] = React.useState("");
  const [bn, setBn] = React.useState("2026-10-10");
  return (
    <div className="grid max-w-xl gap-4 sm:grid-cols-2">
      <div className="space-y-1.5">
        <Label>Date</Label>
        <DatePicker value={date} onChange={setDate} />
      </div>
      <div className="space-y-1.5">
        <Label>তারিখ (bn-BD, week from Saturday)</Label>
        <DatePicker value={bn} onChange={setBn} locale="bn-BD" weekStartsOn={6} labels={{ today: "আজ", clear: "মুছুন" }} />
      </div>
    </div>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { DatePicker, Label } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<DatePicker>

src/components/ui/date-picker.tsx

Prop	Type	Default	Description
`id`	`string`	—
`placeholder`	`string`	`"Pick a date"`
`disabled`	`boolean`	—
`clearable`	`boolean`	`true`
`className`	`string`	—
`locale`	`string`	`"en-GB"`	Month and weekday names and digits, e.g. "bn-BD".
`weekStartsOn`	`Weekday`	`1`	0 = Sunday … 6 = Saturday.
`value`required	`string`	—	"2026-10-10" or "".
`onChange`required	`(value: string) => void`	—
`min`	`string`	—
`max`	`string`	—
`labels`	`{ today?: string; clear?: string }`	—

<Label>

src/components/ui/label.tsx

Prop	Type	Default	Description
`required`	`boolean`	—

Also takes ComponentPropsWithoutRef<typeof LabelPrimitive.Root>.

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui