0
# Date and Time Components
1
2
Specialized components for date and time selection including date pickers, time inputs, and calendar widgets with internationalization support.
3
4
## Capabilities
5
6
### Date Input Components
7
8
Input components for date selection with various formats and constraints.
9
10
```python { .api }
11
def DateInput(
12
id=None,
13
value=None, # Date value (datetime.date or string)
14
placeholder="", # Placeholder text
15
label="", # Input label
16
description="", # Help text
17
error="", # Error message
18
required=False, # Required field
19
disabled=False, # Disabled state
20
valueFormat="YYYY-MM-DD", # Display format
21
minDate=None, # Minimum selectable date
22
maxDate=None, # Maximum selectable date
23
**kwargs
24
):
25
"""
26
Single date input field with date picker.
27
28
Parameters:
29
- id: Component ID for callbacks
30
- value: Selected date value
31
- placeholder: Placeholder text when empty
32
- label: Field label
33
- description: Help text below input
34
- error: Error message
35
- required: Show required indicator
36
- disabled: Disable input
37
- valueFormat: Date display format string
38
- minDate: Earliest selectable date
39
- maxDate: Latest selectable date
40
"""
41
42
def DatePickerInput(
43
id=None,
44
value=None, # Date value or list for range
45
placeholder="", # Placeholder text
46
label="", # Input label
47
description="", # Help text
48
error="", # Error message
49
type="default", # "default" | "multiple" | "range"
50
allowSingleDateInRange=False, # Allow single date in range mode
51
numberOfColumns=1, # Calendar columns
52
columnsToScroll=1, # Columns to scroll
53
minDate=None, # Minimum date
54
maxDate=None, # Maximum date
55
excludeDate=None, # Function to exclude dates
56
locale="en", # Locale for formatting
57
firstDayOfWeek=0, # First day of week (0=Sunday)
58
**kwargs
59
):
60
"""
61
Date picker input with dropdown calendar.
62
63
Parameters:
64
- id: Component ID for callbacks
65
- value: Selected date(s) - single date, list, or range
66
- type: Selection type (single, multiple, range)
67
- allowSingleDateInRange: Allow incomplete range
68
- numberOfColumns: Calendar columns to display
69
- columnsToScroll: Columns to scroll at once
70
- minDate: Minimum selectable date
71
- maxDate: Maximum selectable date
72
- excludeDate: Function to disable specific dates
73
- locale: Language/region for date formatting
74
- firstDayOfWeek: Week start day (0-6)
75
"""
76
77
def DatePicker(
78
id=None,
79
value=None, # Selected date(s)
80
type="default", # "default" | "multiple" | "range"
81
numberOfColumns=1, # Calendar columns
82
columnsToScroll=1, # Columns to scroll
83
minDate=None, # Minimum date
84
maxDate=None, # Maximum date
85
excludeDate=None, # Date exclusion function
86
locale="en", # Locale
87
firstDayOfWeek=0, # Week start day
88
hideWeekdays=False, # Hide weekday headers
89
renderDay=None, # Custom day renderer
90
**kwargs
91
):
92
"""
93
Standalone calendar date picker.
94
95
Parameters:
96
- id: Component ID for callbacks
97
- value: Selected date(s)
98
- type: Selection mode
99
- numberOfColumns: Calendar grid columns
100
- columnsToScroll: Scroll increment
101
- minDate: Earliest selectable date
102
- maxDate: Latest selectable date
103
- excludeDate: Function to disable dates
104
- locale: Localization
105
- firstDayOfWeek: Week start (0=Sunday)
106
- hideWeekdays: Hide day name headers
107
- renderDay: Custom day cell renderer
108
"""
109
```
110
111
### Date-Time Components
112
113
Components combining date and time selection.
114
115
```python { .api }
116
def DateTimePicker(
117
id=None,
118
value=None, # DateTime value
119
placeholder="", # Placeholder text
120
label="", # Input label
121
description="", # Help text
122
error="", # Error message
123
valueFormat="YYYY-MM-DD HH:mm", # Display format
124
submitButtonProps=None, # Submit button properties
125
minDate=None, # Minimum date
126
maxDate=None, # Maximum date
127
locale="en", # Locale
128
**kwargs
129
):
130
"""
131
Combined date and time picker input.
132
133
Parameters:
134
- id: Component ID for callbacks
135
- value: Selected datetime value
136
- valueFormat: DateTime display format
137
- submitButtonProps: Properties for confirm button
138
- minDate: Minimum selectable date
139
- maxDate: Maximum selectable date
140
- locale: Language/region for formatting
141
"""
142
```
143
144
### Time Input Components
145
146
Specialized inputs for time selection.
147
148
```python { .api }
149
def TimeInput(
150
id=None,
151
value="", # Time value (HH:mm format)
152
placeholder="", # Placeholder text
153
label="", # Input label
154
description="", # Help text
155
error="", # Error message
156
format="24", # "12" | "24"
157
withSeconds=False, # Include seconds
158
**kwargs
159
):
160
"""
161
Time input field with time picker.
162
163
Parameters:
164
- id: Component ID for callbacks
165
- value: Time value in HH:mm or HH:mm:ss format
166
- format: Time format (12 or 24 hour)
167
- withSeconds: Include seconds in picker
168
"""
169
```
170
171
### Period Pickers
172
173
Components for selecting months, years, and other periods.
174
175
```python { .api }
176
def MonthPickerInput(
177
id=None,
178
value=None, # Month value (datetime.date)
179
placeholder="", # Placeholder text
180
label="", # Input label
181
description="", # Help text
182
error="", # Error message
183
type="default", # "default" | "multiple" | "range"
184
valueFormat="YYYY-MM", # Display format
185
numberOfColumns=1, # Calendar columns
186
minDate=None, # Minimum month
187
maxDate=None, # Maximum month
188
locale="en", # Locale
189
**kwargs
190
):
191
"""
192
Month picker input component.
193
194
Parameters:
195
- id: Component ID for callbacks
196
- value: Selected month(s)
197
- type: Selection type (single, multiple, range)
198
- valueFormat: Month display format
199
- numberOfColumns: Calendar columns
200
- minDate: Earliest selectable month
201
- maxDate: Latest selectable month
202
- locale: Language/region for formatting
203
"""
204
205
def YearPickerInput(
206
id=None,
207
value=None, # Year value
208
placeholder="", # Placeholder text
209
label="", # Input label
210
description="", # Help text
211
error="", # Error message
212
type="default", # "default" | "multiple" | "range"
213
numberOfColumns=1, # Calendar columns
214
minDate=None, # Minimum year
215
maxDate=None, # Maximum year
216
**kwargs
217
):
218
"""
219
Year picker input component.
220
221
Parameters:
222
- id: Component ID for callbacks
223
- value: Selected year(s)
224
- type: Selection type
225
- numberOfColumns: Calendar columns
226
- minDate: Earliest selectable year
227
- maxDate: Latest selectable year
228
"""
229
```
230
231
### Date Provider
232
233
Localization and configuration provider for date components.
234
235
```python { .api }
236
def DatesProvider(
237
children=None, # Child date components
238
settings=None, # Date settings configuration
239
**kwargs
240
):
241
"""
242
Provider for date component localization and settings.
243
244
Parameters:
245
- children: Date components to configure
246
- settings: Configuration object for date behavior
247
"""
248
```
249
250
## Date Configuration Types
251
252
```python { .api }
253
# Date settings for DatesProvider
254
class DateSettings:
255
locale: str # Locale code (e.g., "en", "es", "fr")
256
firstDayOfWeek: int # Week start day (0-6)
257
weekendDays: list # Weekend days [0, 6] for Sat/Sun
258
labelSeparator: str # Range separator in labels
259
260
# Date value types
261
DateValue = Union[
262
datetime.date, # Python date object
263
str, # ISO date string "YYYY-MM-DD"
264
None # No selection
265
]
266
267
DateRangeValue = Union[
268
List[datetime.date], # [start_date, end_date]
269
List[str], # ["YYYY-MM-DD", "YYYY-MM-DD"]
270
None # No selection
271
]
272
273
MultiDateValue = Union[
274
List[datetime.date], # List of selected dates
275
List[str], # List of ISO date strings
276
[] # No selection
277
]
278
```
279
280
## Usage Examples
281
282
### Basic Date Selection
283
284
```python
285
import dash_mantine_components as dmc
286
from datetime import date, datetime
287
288
date_inputs = dmc.Stack([
289
dmc.DateInput(
290
id="birth-date",
291
label="Birth Date",
292
placeholder="Select your birth date",
293
maxDate=date.today(),
294
valueFormat="MM/DD/YYYY"
295
),
296
297
dmc.DatePickerInput(
298
id="event-date",
299
label="Event Date",
300
placeholder="Pick a date",
301
minDate=date.today(),
302
type="default"
303
),
304
305
dmc.TimeInput(
306
id="meeting-time",
307
label="Meeting Time",
308
format="12",
309
withSeconds=False
310
)
311
])
312
```
313
314
### Date Range Selection
315
316
```python
317
range_picker = dmc.DatePickerInput(
318
id="date-range",
319
label="Select Date Range",
320
placeholder="Pick dates range",
321
type="range",
322
allowSingleDateInRange=True,
323
numberOfColumns=2
324
)
325
```
326
327
### Advanced Date/Time Selection
328
329
```python
330
advanced_datetime = dmc.Stack([
331
dmc.DateTimePicker(
332
id="appointment-datetime",
333
label="Appointment Date & Time",
334
placeholder="Select date and time",
335
valueFormat="MMM DD, YYYY at HH:mm",
336
minDate=datetime.now().date()
337
),
338
339
dmc.MonthPickerInput(
340
id="report-month",
341
label="Report Month",
342
placeholder="Select month",
343
type="multiple",
344
numberOfColumns=3
345
),
346
347
dmc.YearPickerInput(
348
id="financial-year",
349
label="Financial Year",
350
placeholder="Select year range",
351
type="range"
352
)
353
])
354
```
355
356
### Localized Date Components
357
358
```python
359
import dash_mantine_components as dmc
360
361
localized_dates = dmc.DatesProvider([
362
dmc.Stack([
363
dmc.Text("English (US)", weight=500),
364
dmc.DatePickerInput(
365
id="date-en",
366
placeholder="Select date",
367
valueFormat="MM/DD/YYYY"
368
),
369
370
dmc.Text("Spanish", weight=500, mt="md"),
371
dmc.DatePickerInput(
372
id="date-es",
373
placeholder="Seleccionar fecha",
374
locale="es",
375
valueFormat="DD/MM/YYYY"
376
),
377
378
dmc.Text("French", weight=500, mt="md"),
379
dmc.DatePickerInput(
380
id="date-fr",
381
placeholder="Sélectionner une date",
382
locale="fr",
383
firstDayOfWeek=1 # Monday
384
)
385
])
386
], settings={
387
"locale": "en",
388
"firstDayOfWeek": 0,
389
"weekendDays": [0, 6]
390
})
391
```
392
393
### Form with Date Validation
394
395
```python
396
date_form = dmc.Stack([
397
dmc.DateInput(
398
id="start-date",
399
label="Start Date",
400
required=True,
401
minDate=date.today()
402
),
403
404
dmc.DateInput(
405
id="end-date",
406
label="End Date",
407
required=True,
408
# minDate will be set dynamically based on start date
409
),
410
411
dmc.Group([
412
dmc.Button("Reset", variant="outline"),
413
dmc.Button("Submit", type="submit")
414
], position="right")
415
])
416
417
# Callback to handle date validation
418
@callback(
419
Output("end-date", "minDate"),
420
Output("end-date", "error"),
421
Input("start-date", "value"),
422
Input("end-date", "value")
423
)
424
def validate_date_range(start_date, end_date):
425
if start_date:
426
min_end_date = start_date
427
error = ""
428
if end_date and end_date < start_date:
429
error = "End date must be after start date"
430
return min_end_date, error
431
return None, ""
432
```