DateTimePicker

A flexible date and time picker built with react-datepicker. It supports date‑only, time‑only, combined date‑time, 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. 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. Tip: default – Use date for 90% of cases. appointments – Use datetime for appointment booking. scheduling – Use time for recurring schedules. filtering – Use daterange for search filters, reporting, analytics date ranges. booking – Use daterange for hotel check‑in/out, rental periods, trip duration.

label

Optional label displayed above picker. Explains what date/time user is selecting. Type: string. Tip: clarity – Be specific: “Delivery Date” better than “Date”. context – Explain what selection affects: “Select Your Travel Dates”. concise – 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: actionable – Use action verbs: “Select”, “Choose”, “Pick”. specific – Match picker type: “Select time” for time picker, “Choose date range” for daterange. helpful – Provide context: “Select your appointment date”.

dateFormat

Format for displaying selected date. Uses react-datepicker format tokens. Type: string. Default: MM/dd/yyyy. Tip: us – Use MM/dd/yyyy for US audiences. international – Use dd/MM/yyyy for international audiences. datetime – Use “MM/dd/yyyy h:mm aa” when pickerType is datetime. readable – For display‑only: “MMMM d, yyyy” is more readable.

timeIntervals

Minute intervals for time selection dropdown. Only applies to time and datetime pickers. Type: number. Default: 15. Tip: default – 15 minutes works for most cases. appointments – 15 or 30 minutes for appointment booking. meetings – 30 minutes for meeting scheduling. precise – 5 minutes for precise scheduling needs. hourly – 60 minutes for simple hourly selection.

minDate

Minimum selectable date in YYYY-MM-DD format. Prevents selection of earlier dates. Type: string. Tip: futureOnly – Set to current date for future events (bookings, appointments, registrations). range – Use with maxDate to limit selection to specific range. validation – Better than form validation – prevents invalid selection upfront.

maxDate

Maximum selectable date in YYYY-MM-DD format. Prevents selection of later dates. Type: string. Tip: booking – Limit how far ahead users can book (e.g., 90 days out). historical – For birth dates, use maxDate as current date (no future dates). range – Use with minDate to create valid selection window.

inline

Display calendar inline (always visible) vs popup (click to open). Type: boolean. Default: false. Visual Impact: true – Calendar always visible on page. Takes up space but immediately interactive. false – Calendar appears in popup when input clicked. Saves space. Standard for forms. Tip: default – Use false for most cases – popup picker saves space. prominent – Use true for prominent booking calendars, availability displays. forms – Use false in forms – cleaner layout, multiple fields visible. standalone – Use true for standalone date pickers (main page purpose is date selection).

showTimeSelect

Show time selection alongside date picker. Alternative to using pickerType datetime. Type: boolean. Default: false. Tip: alternative – Generally use pickerType: datetime instead – clearer intent. legacy – 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. Tip: securityNote – 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