Date Picker

Overview

The DatePicker component is a flexible and feature-rich date selection component that supports both single date selection and date range selection. It includes multiple themes, color schemes, animations, and extensive customization options.

Installation

CLI

ignix add component date-picker

Previews

Basic Date Picker

Preview

Appointment Date

Choose your appointment date

Code

import { DatePicker } from '@mindfiredigital/ignix-ui';

function MyComponent() {
  const [date, setDate] = useState<Date | null>(null);
  const handleDateChange = (date: Date | null) => {
        setDate(date);
  };
  return (
    <DatePicker
      value={date || undefined}
      onChange={handleDateChange}
      placeholder="Select a date"
      label="Appointment Date"
      helperText="Choose your appointment date"
    />
  );
}

Range Date Picker

Preview

Select Date Range

–

Choose start and end dates

Code

import { DatePicker } from '@mindfiredigital/ignix-ui';

function MyComponent() {
  const [range, setRange] = useState({ start: null, end: null });
  // Handler for range date picker
  const handleRangeDateChange = (range: { start: Date | null; end: Date | null }) => {
      setRange(range);
  };

  return (
    <DatePicker
      variant="range"
      value={range}
      onChange={handleRangeDateChange}
      placeholder={['Start date', 'End date']}
      label="Select Date Range"
      helperText="Choose start and end dates"
      todayButton
      clearButton
    />
  );
}

Size Variants

Preview

Small

Medium (Default)

Large

Extra Large

Code

// All available sizes
<DatePicker size="sm" placeholder="Small picker" />
<DatePicker size="md" placeholder="Medium picker" />
<DatePicker size="lg" placeholder="Large picker" />
<DatePicker size="xl" placeholder="Extra large picker" />

Color Schemes

Preview

Theme Mode

Blue

Green

Purple

Orange

Slate

Rose

Code

// Different color schemes
<DatePicker colorScheme="blue" placeholder="Blue theme" />
<DatePicker colorScheme="green" placeholder="Green theme" />
<DatePicker colorScheme="purple" placeholder="Purple theme" />
<DatePicker colorScheme="orange" placeholder="Orange theme" />
<DatePicker colorScheme="slate" placeholder="Slate theme" />
<DatePicker colorScheme="rose" placeholder="Rose theme" />

Popup Positions

Preview

Bottom Left

Bottom Right

Top Left

Top Right

Left

Right

💡 Tip: The popup position automatically adjusts on small screens to ensure calendar visibility

Code

// Different popup positions
<DatePicker popupPosition="bottom-left" placeholder="Bottom Left" />
<DatePicker popupPosition="bottom-right" placeholder="Bottom Right" />
<DatePicker popupPosition="top-left" placeholder="Top Left" />
<DatePicker popupPosition="top-right" placeholder="Top Right" />
<DatePicker popupPosition="left" placeholder="Left Side" />
<DatePicker popupPosition="right" placeholder="Right Side" />

Controlled & Uncontrolled

The DatePicker can be used in both controlled and uncontrolled modes:

Hotel Booking Example

Preview

Select Your Stay*

–

Choose check-in and check-out dates (weekends are unavailable)

Features demonstrated:

• Date range selection
• Min/max date constraints
• Disabled dates (weekends)
• Today and Clear buttons
• Custom date format (MMM DD, YYYY)

Code

function HotelBooking() {
  const [bookingRange, setBookingRange] = useState({ start: null, end: null });
  const today = new Date();
  const nextMonth = new Date(today);
  nextMonth.setMonth(today.getMonth() + 3);

  // Disable weekends
  const disabledDates = Array.from({ length: 90 }, (_, i) => {
    const date = new Date(today);
    date.setDate(today.getDate() + i);
    return date.getDay() === 0 || date.getDay() === 6 ? date : null;
  }).filter(Boolean);

  const handleBookingChange = (newRange: { start: Date | null; end: Date | null }) => {
    setBooking({
      checkIn: newRange.start,
      checkOut: newRange.end
    });
  };

  return (
    <DatePicker
      variant="range"
      value={bookingRange}
      onChange={handleBookingChange}
      placeholder={['Check-in date', 'Check-out date']}
      label="Hotel Booking"
      helperText="Select your stay dates (weekends disabled)"
      minDate={today}
      maxDate={nextMonth}
      disabledDates={disabledDates}
      required
      size="lg"
      colorScheme="blue"
      todayButton
      clearButton
      format="MMM DD, YYYY"
    />
  );
}

Validation Examples

Preview

Required Field

This field must be filled

Min/Max Date Constraints

Dates between 1/21/2026 and 1/28/2026

Disabled Dates

2nd and 4th from today are unavailable

Error State

Invalid date selected

Date Picker Playground

Customize the DatePicker and see changes in real-time

Preview

Variant

Single DateDate Range

Size

SmallMediumLargeExtra Large

Color Scheme

BlueGreenPurpleOrangeSlateRose

Popup Position

Bottom LeftBottom RightTop LeftTop RightLeftRight

Show Icon

Today Button

Clear Button

Required

Disabled

Select Date

Interactive playground - customize using controls above

Controlled Usage

Single Date Picker

Preview

Single Date Picker

Date is controlled by React state

Selected: No date selected

Code

import { useState } from 'react';
import { DatePicker } from '@mindfiredigital/ignix-ui';

function SingleDateExample() {
  const [date, setDate] = useState<Date | null>(null);

  const handleDateChange = (selectedDate: Date | undefined) => {
    setDate(selectedDate || null);
  };

  return (
    <DatePicker
      value={date || undefined}
      onChange={handleDateChange}
      placeholder="Select a date"
      label="Appointment Date"
      helperText="Choose your appointment date"
    />
  );
}

Range Date Picker

Preview

Range Date Picker

–

Range is controlled by React state

Selected Range:

Start: Not selected

End: Not selected

Code

import { useState } from 'react';
import { DatePicker } from '@mindfiredigital/ignix-ui';

function RangeDateExample() {
  const [range, setRange] = useState({ 
    start: null, 
    end: null 
  });

  const handleRangeChange = (selectedRange: { start: Date | null; end: Date | null }) => {
    setRange(selectedRange);
  };

  return (
    <DatePicker
      variant="range"
      value={range}
      onChange={handleRangeChange}
      placeholder={['Start date', 'End date']}
      label="Select Date Range"
      helperText="Choose start and end dates"
    />
  );
}

Props

Core Props

Prop	Type	Default	Description
variant	'single' | 'range'	'single'	Date selection mode
value	Date | DateRange	-	Selected date(s)
onChange	`(date: Date	DateRange) => void`	-
onError	`(error: string	null) => void`	-

Configuration

Prop	Type	Default	Description
placeholder	string '| [string, string]	'Select date'	Input placeholder text
format	DateFormat	'MM/DD/YYYY'	Date display format
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Component size
disabled	boolean	false	Disable the date picker
readOnly	boolean	false	Make the input read-only
required	boolean	false	Make selection required
minDate	Date	-	Minimum selectable date
maxDate	Date	-	Maximum selectable date
disabledDates	Date[]	-	Array of disabled dates
highlightDates	Date[]	-	Array of highlighted dates
allowEmpty	boolean	false	Allow clearing selected date
todayButton	boolean	true	Show "Today" button in calendar
clearButton	boolean	true	Show "Clear" button in calendar
autoClose	boolean	false	Auto-close calendar after selection
validateOnChange	boolean	true	Validate on date change

Styling & UI

Prop	Type	Default	Description
themeMode	'light' | 'dark'	'light'	Theme mode
colorScheme	'blue' | 'green' | 'purple' | 'orange' | 'rose'	'blue'	Color scheme
popupPosition	PopupPosition	'bottom-left'	Calendar popup position
showIcon	boolean	true	Show calendar icon
icon	React.ReactNode	<Calendar />	Custom icon component
className	string	-	Container CSS classes
inputClassName	string	-	Input CSS classes
calendarClassName	string	-	Calendar CSS classes
label	string	-	Input label
helperText	string	-	Helper text below input

Validation & Error

Prop	Type	Default	Description
error	boolean	false	Error state
errorMessage	string	-	Error message to display

Internationalization

Prop	Type	Default	Description
weekStart	0 | 1	0	Week start day (0=Sunday, 1=Monday)
monthNames	string[]	MONTH_NAMES	Custom month names
dayNames	string[]	DAY_NAMES	Custom day names
todayText	string	'Today'	Today button text
clearText	string	'Clear'	Clear button text

Date Formats

Format	Example	Description
MM/DD/YYYY	12/25/2024	Month/Day/Year
DD/MM/YYYY	25/12/2024	Day/Month/Year
YYYY-MM-DD	2024-12-25	ISO format
MMM DD, YYYY	Dec 25, 2024	Short month name
DD MMM YYYY	25 Dec 2024	Day with short month
YYYY/MM/DD	2024/12/25	Year/Month/Day

Popup Positions

Position	Description
bottom-left	Below the input, aligned left
bottom-right	Below the input, aligned right
top-left	Above the input, aligned left
top-right Above the input, aligned right
left	To the left of the input
right	To the right of the input