## DateTimePicker Capture datetime from the user Category: Date Pickers ### DatePicker props `DateTimePicker` supports most of the `DatePicker` props, read through [DatePicker](/components/datepicker) documentation to learn about all component features that are not listed on this page. ### Simple Example ```python import dash_mantine_components as dmc from dash import Input, Output, html, callback, no_update component = html.Div( [ dmc.DateTimePicker( id="datetime-picker", label="Start Date and time", description="You can also provide a description", w=250, ), dmc.Space(h=10), dmc.Text(id="selected-datetime"), ] ) @callback(Output("selected-datetime", "children"), Input("datetime-picker", "value")) def update_output(d): return f"You have selected {d}" ``` ### With Seconds ```python import dash_mantine_components as dmc component = dmc.DateTimePicker( label="Pick date and time", placeholder="Pick date and time", withSeconds=True, ) ``` ### Presets Use `presets` prop to add custom date presets. Presets are displayed next to the calendar: ```python from datetime import datetime, timedelta from dateutil.relativedelta import relativedelta import dash_mantine_components as dmc now = datetime.now() component = dmc.DateTimePicker( label="Pick date and time", placeholder="Pick date and time", presets=[ { "value": (now - timedelta(days=1)).isoformat(), "label": "Yesterday", }, { "value": now.isoformat(), "label": "Today", }, { "value": (now + timedelta(days=1)).isoformat(), "label": "Tomorrow", }, { "value": (now + relativedelta(months=1)).isoformat(), "label": "Next month", }, { "value": (now + relativedelta(years=1)).isoformat(), "label": "Next year", }, { "value": (now - relativedelta(months=1)).isoformat(), "label": "Last month", }, { "value": (now - relativedelta(years=1)).isoformat(), "label": "Last year", }, ] ) ``` ### TimePicker props You can pass props down to the underlying [TimePicker](//components/timepicker) component with `timePickerProps` prop. Example of enabling dropdown and setting 12h format for time picker: ```python from datetime import datetime import dash_mantine_components as dmc component = dmc.DateTimePicker( label="Pick date and time", placeholder="Pick Date and time", timePickerProps={ "withDropdown": True, "popoverProps": { "withinPortal": False }, "format": '12h', } ) ``` ### Value format Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label. ```python import dash_mantine_components as dmc component = dmc.DateTimePicker( valueFormat="DD MMM YYYY hh:mm A", label="Pick date and time (Value Formatter)", placeholder="Pick date and time", ) ``` ### Disabled state ```python import dash_mantine_components as dmc component = dmc.DateTimePicker( disabled=True, label="Pick date and time (Disabled)", placeholder="Pick date and time", ) ``` ### Input props ### Clearable Set `clearable=True` prop to display clear button in the right section. Note that if you set `rightSection` prop, clear button will not be displayed. ```python from datetime import datetime import dash_mantine_components as dmc component = dmc.DateTimePicker( clearable=True, value="2025-01-01", label="Pick date and time (clearable)", placeholder="Pick Date and time", ) ``` ### Open picker in modal By default, `DateTimePicker` is rendered inside `Popover`. You can change that to `Modal` by setting `dropdownType="modal"` ```python import dash_mantine_components as dmc component = dmc.DateTimePicker( dropdownType="modal", label="Pick date and time (picker in modal)", placeholder="Pick date and time", ) ``` ### CSS Extensions As of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file. If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets. ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### DateTimePicker selectors | Selector | Static selector | Description | |-----------------------------|-----------------------------------------------|-------------------------------------------------------------| | wrapper | .mantine-DateTimePicker-wrapper | Root element of the Input | | input | .mantine-DateTimePicker-input | Input element | | section | .mantine-DateTimePicker-section | Left and right sections | | root | .mantine-DateTimePicker-root | Root element | | label | .mantine-DateTimePicker-label | Label element | | required | .mantine-DateTimePicker-required | Required asterisk element, rendered inside label | | description | .mantine-DateTimePicker-description | Description element | | error | .mantine-DateTimePicker-error | Error element | | calendarHeader | .mantine-DateTimePicker-calendarHeader | Calendar header root element | | calendarHeaderControl | .mantine-DateTimePicker-calendarHeaderControl | Previous/next calendar header controls | | calendarHeaderControlIcon | .mantine-DateTimePicker-calendarHeaderControlIcon | Icon of previous/next calendar header controls | | calendarHeaderLevel | .mantine-DateTimePicker-calendarHeaderLevel | Level control (changes levels when clicked, month -> year -> decade) | | levelsGroup | .mantine-DateTimePicker-levelsGroup | Group of months levels | | yearsList | .mantine-DateTimePicker-yearsList | Years list table element | | yearsListRow | .mantine-DateTimePicker-yearsListRow | Years list row element | | yearsListCell | .mantine-DateTimePicker-yearsListCell | Years list cell element | | yearsListControl | .mantine-DateTimePicker-yearsListControl | Button used to pick months and years | | monthsList | .mantine-DateTimePicker-monthsList | Months list table element | | monthsListRow | .mantine-DateTimePicker-monthsListRow | Months list row element | | monthsListCell | .mantine-DateTimePicker-monthsListCell | Months list cell element | | monthsListControl | .mantine-DateTimePicker-monthsListControl | Button used to pick months and years | | monthThead | .mantine-DateTimePicker-monthThead | thead element of month table | | monthRow | .mantine-DateTimePicker-monthRow | tr element of month table | | monthTbody | .mantine-DateTimePicker-monthTbody | tbody element of month table | | monthCell | .mantine-DateTimePicker-monthCell | td element of month table | | month | .mantine-DateTimePicker-month | Month table element | | weekdaysRow | .mantine-DateTimePicker-weekdaysRow | Weekdays tr element | | weekday | .mantine-DateTimePicker-weekday | Weekday th element | | day | .mantine-DateTimePicker-day | Month day control | | timeWrapper | .mantine-DateTimePicker-timeWrapper | Wrapper around time input and submit button | | timeInput | .mantine-DateTimePicker-timeInput | TimeInput | | submitButton | .mantine-DateTimePicker-submitButton | Submit button | #### DateTimePicker data attributes | Selector | Attribute | Condition | Value | |-----------------------|--------------------|----------------------------------------------------------|----------------------------------------------| | calendarHeaderControl | data-direction | – | "previous" or "next" depending on the control type | | calendarHeaderControl | data-disabled | Control is disabled for any reason | – | | monthCell | data-with-spacing | `withCellSpacing` prop is set | – | | day | data-today | Date is the same as `new Date()` | – | | day | data-hidden | Day is outside of current month and `hideOutsideDates` is set | – | | day | data-disabled | Day disabled by one of the props (`excludeDate`, `getDayProps`, etc.) | – | | day | data-weekend | Day is weekend | – | | day | data-outside | Day is outside of the current month | – | | day | data-selected | Day is selected | – | | day | data-in-range | Day is in range selection | – | | day | data-first-in-range| Day is first in range selection | – | | day | data-last-in-range | Day is last in range selection | – | ### Keyword Arguments #### DateTimePicker - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - ariaLabels (dict; optional): aria-label attributes for controls on different levels. `ariaLabels` is a dict with keys: - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - clearButtonProps (dict; optional): Props passed down to clear button. `clearButtonProps` is a dict with keys: - clearable (boolean; optional): Determines whether input value can be cleared, adds clear button to right section, False by default. - columnsToScroll (number; optional): Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - debounce (number; default 0): Debounce time in ms. - decadeLabelFormat (string; optional): dayjs label format to display decade label or a function that returns decade label based on date value, defaults to "YYYY". - defaultDate (string; optional): Initial displayed date. - description (a list of or a singular dash component, string or number; optional): Contents of `Input.Description` component. If not set, description is not rendered. - descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Description` component. - disabled (boolean; optional): Sets `disabled` attribute on the `input` element. - disabledDates (boolean | number | string | dict | list; optional): Specifies days that should be disabled. Either a list of dates or a function. See https://www.dash-mantine-components.com/functions-as-props. - dropdownType (a value equal to: 'popover', 'modal'; optional): Type of dropdown, defaults to popover. - error (a list of or a singular dash component, string or number; optional): Contents of `Input.Error` component. If not set, error is not rendered. - errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Error` component. - firstDayOfWeek (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional): number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday. - getDayProps (boolean | number | string | dict | list; optional): A function that passes props down Day component based on date. (See https://www.dash-mantine-components.com/functions-as-props). - getMonthControlProps (boolean | number | string | dict | list; optional): A function that passes props down month picker control based on date. (See https://www.dash-mantine-components.com/functions-as-props). - getYearControlProps (boolean | number | string | dict | list; optional): A function that passes props down to year picker control based on date. (See https://www.dash-mantine-components.com/functions-as-props). - hasNextLevel (boolean; optional): Determines whether next level button should be enabled, defaults to True. - headerControlsOrder (list of a value equal to: 'level', 'next', 'previous's; optional): Controls order, `['previous', 'level', 'next']`` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - hideOutsideDates (boolean; optional): Determines whether outside dates should be hidden, defaults to False. - hideWeekdays (boolean; optional): Determines whether weekdays row should be hidden, defaults to False. - highlightToday (boolean; optional): Determines whether today should be highlighted with a border, False by default. - inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input` component. - inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional): Controls order of the elements, `['label', 'description', 'input', 'error']` by default. - label (a list of or a singular dash component, string or number; optional): Contents of `Input.Label` component. If not set, label is not rendered. - labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Label` component. - labelSeparator (string; optional): Separator between range value. - leftSection (a list of or a singular dash component, string or number; optional): Content section rendered on the left side of the input. - leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `leftSection` element, `'none'` by default. - leftSectionProps (dict; optional): Props passed down to the `leftSection` element. - leftSectionWidth (string | number; optional): Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height. - level (a value equal to: 'month', 'year', 'decade'; optional): Current level displayed to the user (decade, year, month), used for controlled component. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - maxDate (string; optional): Maximum possible date. - minDate (string; optional): Minimum possible date. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - modalProps (dict; optional): Props passed down to Modal component. `modalProps` is a dict with keys: - monthLabelFormat (string; optional): dayjs label format to display month label or a function that returns month label based on month value, defaults to "MMMM YYYY". - monthsListFormat (string; optional): dayjs format for months list. - n_submit (number; default 0): An integer that represents the number of times that this element has been submitted. - name (string; optional): Name prop. - nextIcon (a list of or a singular dash component, string or number; optional): Change next icon. - nextLabel (string; optional): aria-label for next button. - numberOfColumns (number; optional): Number of columns to render next to each other. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - placeholder (string; optional): Input placeholder. - pointer (boolean; optional): Determines whether the input should have `cursor: pointer` style, `False` by default. - popoverProps (dict; optional): Props passed down to Popover component. `popoverProps` is a dict with keys: - presets (list of dicts; optional): Predefined values to pick from. `presets` is a list of dicts with keys: - previousIcon (a list of or a singular dash component, string or number; optional): Change previous icon. - previousLabel (string; optional): aria-label for previous button. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default. - readOnly (boolean; optional): Determines whether the user can modify the value. - renderDay (boolean | number | string | dict | list; optional): A function that controls day value rendering. (See https://www.dash-mantine-components.com/functions-as-props). - required (boolean; optional): Adds required attribute to the input and a red asterisk on the right side of label, `False` by default. - rightSection (a list of or a singular dash component, string or number; optional): Content section rendered on the right side of the input. - rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `rightSection` element, `'none'` by default. - rightSectionProps (dict; optional): Props passed down to the `rightSection` element. - rightSectionWidth (string | number; optional): Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height. - size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional): Component size. - sortDates (boolean; optional): Determines whether dates value should be sorted before onChange call, only applicable when type="multiple", True by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - submitButtonProps (boolean | number | string | dict | list; optional): Props passed down to the submit button. - tabIndex (number; optional): tab-index. - timePickerProps (dict; optional): Props passed the TimePicker component. - value (string; optional): Controlled component value. - valueFormat (string; optional): Dayjs format to display input value, "DD/MM/YYYY HH:mm" by default. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - weekdayFormat (string; optional): dayjs format for weekdays names, defaults to "dd". - weekendDays (list of a value equal to: 0, 1, 2, 3, 4, 5, 6s; optional): Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider. - withAsterisk (boolean; optional): Determines whether the required asterisk should be displayed. Overrides `required` prop. Does not add required attribute to the input. `False` by default. - withCellSpacing (boolean; optional): Determines whether controls should be separated by spacing, True by default. - withErrorStyles (boolean; optional): Determines whether the input should have red border and red text color when the `error` prop is set, `True` by default. - withSeconds (boolean; optional): Determines whether seconds input should be rendered. - withWeekNumbers (boolean; optional): Determines whether week numbers should be displayed, False by default. - wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the root element. - yearLabelFormat (string; optional): dayjs label format to display year label or a function that returns year label based on year value, defaults to "YYYY". - yearsListFormat (string; optional): dayjs format for years list, `'YYYY'` by default.