Your first picker

Before this page, install Calix and, if you want the included appearance, add one stylesheet in the correct framework file.

Popup date picker

The DatePicker component owns the trigger, popover positioning, calendar, and focus behavior. This complete client component keeps the selected date in React state so you can display or submit it elsewhere.

"use client";
 
import { useState } from "react";
import { DatePicker } from "@alydev/datepicker";
import { gregorian } from "@alydev/adapter-gregorian";
import "@alydev/themes/default.css";
 
export function Example() {
  const [value, setValue] = useState<Date | null>(null);
 
  return (
    <DatePicker
      adapter={gregorian}
      locale="en-US"
      value={value}
      onChange={setValue}
      placeholder="Choose a date"
      theme="light"
    />
  );
}

If you use Next.js App Router, keep "use client" in this component. For Vite or Remix, it is not needed. The theme="light" prop selects the light variant only after you have imported a Calix theme; without one it is safe but has no visual effect.

Inline calendar

Use Calendar when the calendar should always be visible. It shares the same selection, localization, and constraint props as DatePicker.

import { Calendar } from "@alydev/datepicker";
import { gregorian } from "@alydev/adapter-gregorian";
 
<Calendar adapter={gregorian} locale="en-US" showToday showClear />;

Controlled and uncontrolled values

Use value and onChange when the parent owns the selection. Use defaultValue when Calix should retain it internally. onChange is called in both cases.

// Calix owns the value after the initial render.
<Calendar adapter={gregorian} defaultValue={new Date()} onChange={console.log} />

The public value is always JavaScript Date data:

Switch calendars

The adapter controls date math; locale controls language, digits, and direction. Switch to Jalali by replacing the adapter:

import { jalali } from "@alydev/adapter-jalali";
 
<DatePicker adapter={jalali} locale="fa-IR" dir="rtl" placeholder="تاریخ را انتخاب کنید" />;

dir is derived from the locale when omitted, so it is normally not necessary to set it yourself.

Serialize output for a form or API

Keep onChange for typed values. Add onOutputChange when you also need a formatted string or JSON payload:

<DatePicker
  adapter={gregorian}
  outputPattern="yyyy-MM-dd"
  onOutputChange={(value) => console.log(value)}
/>

Set outputFormat="json" for JSON instead of text. Next, see Picker modes, Localization, or Hooks.