ComponentsDate Picker

Date Picker

A clean, popover-based calendar component that allows users to select a single date, complete with localization and dropdown select styling.

React

Calendar Popover

Interactive Demo

Try selecting a date below to see how the component behaves and formats the output value.

Select Effective Date

Choose the official implementation date for the department policy.

Installation

pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/micto/date-picker.json

Usage

How to integrate the Date Picker into your form components.

import { useState } from "react"
import { DatePicker } from "@/components/micto/date-picker"

export default function Page() {
  const [date, setDate] = useState("")

  return (
    <div className="max-w-xs">
      <DatePicker 
        value={date} 
        onChange={setDate} 
        placeholder="Pick a date"
      />
    </div>
  )
}

API Reference

Configuration attributes available for the Date Picker component.

Prop	Type	Default	Description
value	string \| Date	undefined	The selected date value. Can be a Date object or an ISO/parsed string representation.
onChange	(dateString: string) => void	undefined	Callback triggered when a date is selected. Returns the formatted date string in local timezone (YYYY-MM-DD HH:mm).
placeholder	string	'Pick a date'	Placeholder text displayed in the input field when no date is selected.
className	string	undefined	Custom classes applied to the date picker trigger button.

PreviousData Table NextDate Picker With Range