Skip to main content
Noor UI

Date Picker

Single date and range selection with calendar integration

Basic Usage

November 29, 2025

Date Range

November 29, 2025 - December 6, 2025

With Constraints

Available from November 29, 2025 to December 29, 2025

Disabled Dates

Weekends are disabled

Real-World Example

Hotel Room Booking

Select check-in and check-out dates

Use Cases

🏨Booking Forms

📅Appointments

🔍Date Filters

🎂Date of Birth Input

Type Definitions

API Reference - DatePicker

NameTypeDefaultDescription
date
Date—Controlled selected date
onDateChange
(date: Date | undefined) => void—Callback when date changes
placeholder
string—Placeholder text in English
placeholderAr
string—Placeholder text in Arabic
disabled
booleanfalseDisable the picker
formatDate
(date: Date | undefined, locale: "en" | "ar") => string—Custom date formatter
minDate
Date—Minimum selectable date
maxDate
Date—Maximum selectable date
disabledDates
Date[][]Array of dates to disable
showHijri
booleanfalseShow Hijri date alongside Gregorian

API Reference - DateRangePicker

NameTypeDefaultDescription
dateRange
DateRange—Controlled date range ({ from: Date, to: Date })
onDateRangeChange
(range: DateRange | undefined) => void—Callback when range changes
placeholder
string—Placeholder text in English
placeholderAr
string—Placeholder text in Arabic
disabled
booleanfalseDisable the picker
formatDateRange
(range: DateRange | undefined, locale: "en" | "ar") => string—Custom range formatter
minDate
Date—Minimum selectable date
maxDate
Date—Maximum selectable date
disabledDates
Date[][]Array of dates to disable

Features

  • Single date and range selection
  • Calendar integration with popover
  • Min/max date constraints
  • Custom disabled dates
  • Customizable formatting
  • Hijri calendar support (coming soon)
  • Bilingual support
  • RTL/LTR support
  • Full accessibility
  • Quick date selection