DateTimePicker

A flexible date and time picker built with react-datepicker. It can handle date‑only, time‑only, combined datetime, and date‑range selections, with customizable formatting for any site that requires date or time input.

Use Cases

• Booking forms (appointment selection, reservation dates, service scheduling)
• Registration forms (birth date, event dates, deadline selection)
• Search filters (date range filtering for content, transactions, reports)
• Deadline selection (project due dates, submission deadlines, expiration dates)
• Event forms (event date/time, RSVP deadlines, conference registration)
• Scheduling interfaces (meeting times, class schedules, availability selection)
• Date range reports (analytics date ranges, custom reporting periods)
• Profile forms (birthdate, anniversary, preference dates)
• E‑commerce (delivery date selection, rental periods, subscription start dates)
• Travel booking (check‑in/check‑out dates, flight dates, trip duration)

Properties

pickerType

Type of picker to display. Determines what user can select. Type: string. Options: date, time, datetime, daterange. Default: date.

Tip: Use date for 90% of cases – simple date selection; use datetime for appointment booking; use time for recurring schedules; use daterange for search filters, reporting, analytics date ranges; use daterange for hotel check‑in/out, rental periods, trip duration.

Visual Impact: date – Calendar grid for date selection only. time – Time selection dropdown only (no date). datetime – Calendar + time selection. daterange – Select start and end dates.

label

Optional label displayed above picker. Explains what date/time user is selecting. Type: string.

Tip: Be specific: “Delivery Date” better than “Date”. Explain what selection affects, e.g., “Select Your Travel Dates”. Keep under 30 characters for clean display.

placeholder

Placeholder text shown in input before user selects. Provides hint about what to select. Type: string. Default: Select date.

Tip: Use action verbs such as “Select”, “Choose”, “Pick”. Match picker type (e.g., “Select time” for time picker). Provide context, e.g., “Select your appointment date”.

dateFormat

Format for displaying selected date. Uses react-datepicker format tokens. Type: string. Default: MM/dd/yyyy.

Tip: Use MM/dd/yyyy for US audiences; dd/MM/yyyy for international audiences; MM/dd/yyyy h:mm aa when pickerType is datetime; for display‑only use “MMMM d, yyyy” (January 15, 2025).

timeIntervals

Minute intervals for time selection dropdown. Only applies to time and datetime pickers. Type: number. Default: 15.

Tip: 15 minutes works for most cases. Use 15 or 30 minutes for appointment booking, 30 minutes for meeting scheduling, 5 minutes for precise needs, 60 minutes for simple hourly selection.

minDate

Minimum selectable date in YYYY-MM-DD format. Prevents selection of earlier dates. Type: string.

Tip: Set to current date for future‑only events (bookings, appointments, registrations). Use with maxDate to limit selection to a specific range. Provides validation before form submission.

maxDate

Maximum selectable date in YYYY-MM-DD format. Prevents selection of later dates. Type: string.

Tip: Limit how far ahead users can book (e.g., 90 days out). For birth dates, set maxDate to current date (no future dates). Use with minDate to create a valid selection window.

inline

Display calendar inline (always visible) vs popup (click to open). Type: boolean. Default: false.

Tip: Use false for most cases – popup picker saves space. Use true for prominent booking calendars or availability displays. Use false in forms for a cleaner layout; use true for standalone date pickers where the main purpose is date selection.

Visual Impact: true – Calendar always visible on page, takes up space but is immediately interactive. false – Calendar appears in popup when input clicked, saves space, standard for forms.

showTimeSelect

Show time selection alongside date picker. Alternative to using pickerType datetime. Type: boolean. Default: false.

Tip: Generally use pickerType: datetime instead – clearer intent. This prop exists for compatibility but pickerType is preferred.

customCss

Custom CSS styles for advanced styling. Parsed as CSS property‑value pairs. Applies to outermost Section container. Type: string.

Security Note: Parsed by cssParser utility. Tenants only affect their own pages (multi‑tenant isolation enforced).

Best Practices

• Use date picker type for most cases – date‑only selection is most common.
• Use datetime picker for appointment booking (need specific time).
• Use time picker for duration or time‑only selection (business hours, class times).
• Use daterange picker for filtering, reporting, or booking periods.
• Set inline: false for most cases – popup picker saves space.
• Set inline: true only for prominent date selection (booking calendars, availability displays).
• Always provide clear label explaining what date/time user is selecting.
• Use placeholder text as hint: ‘Select appointment date’, ‘Choose check‑in date’.
• Set minDate to prevent past date selection for future events/bookings.
• Set maxDate to limit selection range when appropriate.
• Use standard date format MM/dd/yyyy for US audiences, dd/MM/yyyy for international.
• For datetime: use ‘MM/dd/yyyy h:mm aa’ format (includes AM/PM).
• Set timeIntervals to 15 or 30 minutes for appointment booking.
• Keep default timeIntervals at 15 minutes – good balance for most use cases.

Common Mistakes

Not providing label for date picker

Why it's a problem: Users don't know what date they're selecting. Is it birth date? Event date? Delivery date?

Fix: Always use label property: ‘Appointment Date’, ‘Delivery Date’, ‘Birth Date’

Using wrong pickerType for use case

Why it's a problem: time picker when you need date, date picker when you need datetime – wrong input type.

Fix: date = date only, time = time only, datetime = both, daterange = start/end dates

Not setting minDate for future‑only events

Why it's a problem: Users can select past dates for appointments, bookings, registrations – invalid data.

Fix: Set minDate to current date: minDate: '2025-01-15' (use current date value)

Using wrong dateFormat for pickerType

Why it's a problem: dateFormat: ‘MM/dd/yyyy’ for datetime picker – time not shown in input.

Fix: For datetime: use ‘MM/dd/yyyy h:mm aa’ to show both date and time

Setting inline: true in forms with multiple fields

Why it's a problem: Calendar takes up huge amount of space, pushes other form fields down, bad UX.

Fix: Use inline: false (default) for forms – popup picker saves space

Generic placeholder like ‘Date’ or ‘Select’

Why it's a problem: Not helpful – user doesn't know what they're selecting.

Fix: Be specific: ‘Select appointment date’, ‘Choose delivery date’

Setting maxDate in past for future event booking

Why it's a problem: maxDate: ‘2024-12-31’ when current date is 2025-01-15 – no valid dates!

Fix: Ensure maxDate is in future if allowing future selection