Viora LogoViora UI
Login

Date Picker

A date picker component with calendar popup and date formatting.

demo-date-picker-demo.tsx
Loading source code...

Installation

pnpm dlx viora-ui add date-picker
npx viora-ui add date-picker
yarn viora-ui add date-picker
bunx --bun viora-ui add date-picker

Usage

import { DatePickerDemo } from "viora-ui";
import { DatePickerDemo } from "viora-ui";

export default function DatePickerDemoDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-center justify-center p-6">
      <DatePickerDemo />
    </div>
  );
}

API Reference

DatePickerDemo

PropTypeDefaultDescription
type?'button' | 'submit' | 'reset'-Configuration for type.
variant?'outline' | 'dim'-Visual style variant.
mode?'default' | 'input' | 'icon'-Configuration for mode.
placeholder?booleanfalseConfiguration for placeholder.
size?'default' | 'sm'-Size option for the component.
className?string""Additional CSS classes for custom styling.
onClick?(e?: React.MouseEvent<HTMLElement>) => void-Callback fired on click event.
children?React.ReactNode-Content or child elements to render.

Built by Otis

Last updated: 9/13/2026