0
# Main Date Pickers
1

2
Complete date picker components that combine input fields with calendar dropdowns. These are the primary components for most use cases, providing full user interaction with date selection.
3

4
## Capabilities
5

6
### DateRangePicker
7

8
Full-featured date range picker component with dual input fields and calendar display for selecting start and end dates.
9

10
```jsx { .api }
11
/**
12
 * Date range picker component with input fields and calendar
13
 * @param props - DateRangePicker configuration
14
 * @returns DateRangePicker component
15
 */
16
function DateRangePicker(props: DateRangePickerProps): ReactElement;
17

18
interface DateRangePickerProps {
19
  // Required props
20
  startDateId: string;
21
  endDateId: string;
22
  onDatesChange: ({ startDate, endDate }: {
23
    startDate: moment.Moment | null;
24
    endDate: moment.Moment | null;
25
  }) => void;
26
  onFocusChange: (focusedInput: 'startDate' | 'endDate' | null) => void;
27

28
  // Date state
29
  startDate?: moment.Moment | null;
30
  endDate?: moment.Moment | null;
31
  focusedInput?: 'startDate' | 'endDate' | null;
32

33
  // Input customization
34
  startDatePlaceholderText?: string;
35
  endDatePlaceholderText?: string;
36
  startDateAriaLabel?: string;
37
  endDateAriaLabel?: string;
38
  disabled?: boolean;
39
  required?: boolean;
40
  readOnly?: boolean;
41
  screenReaderInputMessage?: string;
42
  showClearDates?: boolean;
43
  showDefaultInputIcon?: boolean;
44
  inputIconPosition?: 'before' | 'after';
45
  customInputIcon?: ReactNode;
46
  customArrowIcon?: ReactNode;
47
  customCloseIcon?: ReactNode;
48

49
  // Styling
50
  noBorder?: boolean;
51
  block?: boolean;
52
  small?: boolean;
53
  regular?: boolean;
54
  keepFocusOnInput?: boolean;
55

56
  // Calendar presentation
57
  orientation?: 'horizontal' | 'vertical';
58
  anchorDirection?: 'left' | 'right';
59
  openDirection?: 'down' | 'up';
60
  horizontalMargin?: number;
61
  withPortal?: boolean;
62
  withFullScreenPortal?: boolean;
63
  appendToBody?: boolean;
64
  disableScroll?: boolean;
65
  numberOfMonths?: number;
66
  keepOpenOnDateSelect?: boolean;
67
  reopenPickerOnClearDates?: boolean;
68
  renderCalendarInfo?: () => ReactNode;
69
  calendarInfoPosition?: 'top' | 'bottom' | 'before' | 'after';
70
  hideKeyboardShortcutsPanel?: boolean;
71
  daySize?: number;
72
  isRTL?: boolean;
73
  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
74
  verticalHeight?: number;
75
  transitionDuration?: number;
76
  verticalSpacing?: number;
77
  horizontalMonthPadding?: number;
78

79
  // Navigation
80
  dayPickerNavigationInlineStyles?: object;
81
  navPosition?: 'navPositionTop' | 'navPositionBottom';
82
  navPrev?: ReactNode;
83
  navNext?: ReactNode;
84
  renderNavPrevButton?: (props: any) => ReactNode;
85
  renderNavNextButton?: (props: any) => ReactNode;
86
  onPrevMonthClick?: (newMonth: moment.Moment) => void;
87
  onNextMonthClick?: (newMonth: moment.Moment) => void;
88
  onClose?: ({ startDate, endDate }: {
89
    startDate: moment.Moment | null;
90
    endDate: moment.Moment | null;
91
  }) => void;
92

93
  // Day customization
94
  renderCalendarDay?: (props: any) => ReactNode;
95
  renderDayContents?: (day: moment.Moment, modifiers: Set<string>) => ReactNode;
96
  renderMonthElement?: (props: any) => ReactNode;
97
  renderMonthText?: (month: moment.Moment) => ReactNode;
98
  renderWeekHeaderElement?: (day: string) => ReactNode;
99
  minimumNights?: number;
100
  enableOutsideDays?: boolean;
101
  isDayBlocked?: (day: moment.Moment) => boolean;
102
  isOutsideRange?: (day: moment.Moment) => boolean;
103
  isDayHighlighted?: (day: moment.Moment) => boolean;
104
  minDate?: moment.Moment;
105
  maxDate?: moment.Moment;
106

107
  // Internationalization
108
  displayFormat?: (() => string) | string;
109
  monthFormat?: string;
110
  weekDayFormat?: string;
111
  phrases?: object;
112
  dayAriaLabelFormat?: string;
113

114
  // Initial state
115
  initialVisibleMonth?: () => moment.Moment;
116
}
117
```
118

119
**Usage Examples:**
120

121
```jsx
122
import React, { useState } from "react";
123
import { DateRangePicker } from "react-dates";
124
import moment from "moment";
125

126
// Basic date range picker
127
function BasicDateRangePicker() {
128
  const [startDate, setStartDate] = useState(null);
129
  const [endDate, setEndDate] = useState(null);
130
  const [focusedInput, setFocusedInput] = useState(null);
131

132
  return (
133
    <DateRangePicker
134
      startDate={startDate}
135
      startDateId="start_date_input"
136
      endDate={endDate}
137
      endDateId="end_date_input"
138
      onDatesChange={({ startDate, endDate }) => {
139
        setStartDate(startDate);
140
        setEndDate(endDate);
141
      }}
142
      focusedInput={focusedInput}
143
      onFocusChange={setFocusedInput}
144
    />
145
  );
146
}
147

148
// Customized date range picker
149
function CustomDateRangePicker() {
150
  const [startDate, setStartDate] = useState(null);
151
  const [endDate, setEndDate] = useState(null);
152
  const [focusedInput, setFocusedInput] = useState(null);
153

154
  return (
155
    <DateRangePicker
156
      startDate={startDate}
157
      startDateId="trip_start"
158
      endDate={endDate}
159
      endDateId="trip_end"
160
      onDatesChange={({ startDate, endDate }) => {
161
        setStartDate(startDate);
162
        setEndDate(endDate);
163
      }}
164
      focusedInput={focusedInput}
165
      onFocusChange={setFocusedInput}
166
      
167
      // Validation
168
      minimumNights={2}
169
      isOutsideRange={(day) => moment().diff(day) > 0}
170
      isDayBlocked={(day) => day.day() === 0} // Block Sundays
171
      
172
      // Customization
173
      startDatePlaceholderText="Check In"
174
      endDatePlaceholderText="Check Out"
175
      numberOfMonths={2}
176
      showClearDates={true}
177
      
178
      // Portal rendering for overlays
179
      withPortal={true}
180
      
181
      // Custom rendering
182
      renderCalendarInfo={() => (
183
        <div>Select your travel dates</div>
184
      )}
185
    />
186
  );
187
}
188
```
189

190
### SingleDatePicker
191

192
Single date selection component with input field and calendar display for selecting one date.
193

194
```jsx { .api }
195
/**
196
 * Single date picker component with input field and calendar
197
 * @param props - SingleDatePicker configuration
198
 * @returns SingleDatePicker component
199
 */
200
function SingleDatePicker(props: SingleDatePickerProps): ReactElement;
201

202
interface SingleDatePickerProps {
203
  // Required props
204
  id: string;
205
  onDateChange: (date: moment.Moment | null) => void;
206
  onFocusChange: ({ focused }: { focused: boolean }) => void;
207

208
  // Date state
209
  date?: moment.Moment | null;
210
  focused?: boolean;
211

212
  // Input customization
213
  placeholder?: string;
214
  ariaLabel?: string;
215
  disabled?: boolean;
216
  required?: boolean;
217
  readOnly?: boolean;
218
  screenReaderInputMessage?: string;
219
  showClearDate?: boolean;
220
  showDefaultInputIcon?: boolean;
221
  inputIconPosition?: 'before' | 'after';
222
  customInputIcon?: ReactNode;
223
  customCloseIcon?: ReactNode;
224

225
  // Styling
226
  noBorder?: boolean;
227
  block?: boolean;
228
  small?: boolean;
229
  regular?: boolean;
230
  keepFocusOnInput?: boolean;
231

232
  // Calendar presentation
233
  orientation?: 'horizontal' | 'vertical';
234
  anchorDirection?: 'left' | 'right';
235
  openDirection?: 'down' | 'up';
236
  horizontalMargin?: number;
237
  withPortal?: boolean;
238
  withFullScreenPortal?: boolean;
239
  appendToBody?: boolean;
240
  disableScroll?: boolean;
241
  numberOfMonths?: number;
242
  keepOpenOnDateSelect?: boolean;
243
  reopenPickerOnClearDate?: boolean;
244
  renderCalendarInfo?: () => ReactNode;
245
  calendarInfoPosition?: 'top' | 'bottom' | 'before' | 'after';
246
  hideKeyboardShortcutsPanel?: boolean;
247
  daySize?: number;
248
  isRTL?: boolean;
249
  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
250
  verticalHeight?: number;
251
  transitionDuration?: number;
252
  verticalSpacing?: number;
253
  horizontalMonthPadding?: number;
254

255
  // Navigation
256
  dayPickerNavigationInlineStyles?: object;
257
  navPosition?: 'navPositionTop' | 'navPositionBottom';
258
  navPrev?: ReactNode;
259
  navNext?: ReactNode;
260
  renderNavPrevButton?: (props: any) => ReactNode;
261
  renderNavNextButton?: (props: any) => ReactNode;
262
  onPrevMonthClick?: (newMonth: moment.Moment) => void;
263
  onNextMonthClick?: (newMonth: moment.Moment) => void;
264
  onClose?: (date: moment.Moment | null) => void;
265

266
  // Day customization
267
  renderCalendarDay?: (props: any) => ReactNode;
268
  renderDayContents?: (day: moment.Moment, modifiers: Set<string>) => ReactNode;
269
  renderMonthElement?: (props: any) => ReactNode;
270
  renderMonthText?: (month: moment.Moment) => ReactNode;
271
  renderWeekHeaderElement?: (day: string) => ReactNode;
272
  enableOutsideDays?: boolean;
273
  isDayBlocked?: (day: moment.Moment) => boolean;
274
  isOutsideRange?: (day: moment.Moment) => boolean;
275
  isDayHighlighted?: (day: moment.Moment) => boolean;
276

277
  // Internationalization
278
  displayFormat?: (() => string) | string;
279
  monthFormat?: string;
280
  weekDayFormat?: string;
281
  phrases?: object;
282
  dayAriaLabelFormat?: string;
283

284
  // Initial state
285
  initialVisibleMonth?: () => moment.Moment;
286
}
287
```
288

289
**Usage Examples:**
290

291
```jsx
292
import React, { useState } from "react";
293
import { SingleDatePicker } from "react-dates";
294
import moment from "moment";
295

296
// Basic single date picker
297
function BasicSingleDatePicker() {
298
  const [date, setDate] = useState(null);
299
  const [focused, setFocused] = useState(false);
300

301
  return (
302
    <SingleDatePicker
303
      date={date}
304
      onDateChange={setDate}
305
      focused={focused}
306
      onFocusChange={({ focused }) => setFocused(focused)}
307
      id="date_picker"
308
    />
309
  );
310
}
311

312
// Customized single date picker
313
function CustomSingleDatePicker() {
314
  const [date, setDate] = useState(null);
315
  const [focused, setFocused] = useState(false);
316

317
  return (
318
    <SingleDatePicker
319
      date={date}
320
      onDateChange={setDate}
321
      focused={focused}
322
      onFocusChange={({ focused }) => setFocused(focused)}
323
      id="appointment_date"
324
      
325
      // Validation
326
      isOutsideRange={(day) => {
327
        // Only allow future dates and weekdays
328
        return moment().diff(day) > 0 || day.day() === 0 || day.day() === 6;
329
      }}
330
      
331
      // Customization
332
      placeholder="Select appointment date"
333
      showClearDate={true}
334
      numberOfMonths={1}
335
      
336
      // Custom rendering
337
      renderDayContents={(day, modifiers) => {
338
        if (modifiers.has('blocked')) {
339
          return <span style={{ color: 'red' }}>{day.format('D')}</span>;
340
        }
341
        return day.format('D');
342
      }}
343
    />
344
  );
345
}
346
```
347

348
## Common Props
349

350
### Validation Functions
351

352
All pickers support these validation functions:
353

354
- **`isDayBlocked`**: Returns `true` for dates that should be unselectable
355
- **`isOutsideRange`**: Returns `true` for dates outside the allowed range
356
- **`isDayHighlighted`**: Returns `true` for dates that should be visually highlighted
357

358
### Styling Options
359

360
- **`noBorder`**: Removes input field borders
361
- **`block`**: Makes the component full width
362
- **`small`**: Uses smaller styling variant
363
- **`regular`**: Uses default styling
364

365
### Portal Rendering
366

367
- **`withPortal`**: Renders calendar in a portal (useful for z-index issues)
368
- **`withFullScreenPortal`**: Renders calendar in fullscreen portal (mobile-friendly)
369
- **`appendToBody`**: Appends portal to document body
370

371
### Accessibility
372

373
All components include comprehensive accessibility features:
374
- ARIA labeling for screen readers
375
- Keyboard navigation support
376
- Focus management
377
- Customizable announcements