## DatePickerInput  
Date, multiple dates and dates range picker input. Helps you easily switch between different months, years along with locale support.  
Category: Date Pickers  

### Simple Example

This is a simple example of `DatePickerInput` tied to a callback. You can either use strings in a valid datetime format such
as `YYYY-MM-DD` or use the date object from datetime library.

> If you would like to enable the user to type a date manually into the input field, please use the `DateInput` component

```python
from datetime import datetime, date

import dash_mantine_components as dmc
from dash import Input, Output, html, callback
from dash.exceptions import PreventUpdate

component = html.Div(
    [
        dmc.DatePickerInput(
            id="date-picker-input",
            label="Start Date",
            description="You can also provide a description",
            minDate=date(2020, 8, 5),
            value=datetime.now().date(),  # or string in the format "YYYY-MM-DD"
            w=250,
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date-input"),
    ]
)


@callback(
    Output("selected-date-input", "children"), Input("date-picker-input", "value")
)
def update_output(d):
    prefix = "You have selected: "
    if d:
        return prefix + d
    else:
        raise PreventUpdate
```
### Multiple dates

Set type="multiple" to allow user to pick multiple dates.  Note that `value` is a list.

```python
from datetime import datetime, date, timedelta

import dash_mantine_components as dmc
from dash import Input, Output, html, callback, no_update


component = html.Div(
    [
        dmc.DatePickerInput(
            id="date-picker-input-multiple",
            label="Pick dates",
            description="Pick one or more dates",
            minDate=date(2020, 8, 5),
            value=[datetime.now().date(), datetime.now().date() + timedelta(days=5)],
            w=400,
            type="multiple",
            placeholder="Pick dates",
            maw=300,
            clearable=True,
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date-input-multiple"),
    ]
)


@callback(
    Output("selected-date-input-multiple", "children"),
    Input("date-picker-input-multiple", "value"),
)
def update_output(dates):
    prefix = "You have selected: "
    if dates:
        return prefix + ",   ".join(dates)
    else:
        return no_update
```
### Dates range

Set type="range" to allow user to pick dates range. Note that `value` is a list.

```python
from datetime import datetime, timedelta, date

import dash_mantine_components as dmc
from dash import Input, Output, html, callback
from dash.exceptions import PreventUpdate

component = html.Div(
    [
        dmc.DatePickerInput(
            id="date-input-range-picker",
            label="Date Range",
            description="Select a date range",
            minDate=date(2020, 8, 5),
            type="range",
            value=[datetime.now().date(), datetime.now().date() + timedelta(days=5)],
            maw=300,
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date-input-range-picker"),
    ]
)


@callback(
    Output("selected-date-input-range-picker", "children"),
    Input("date-input-range-picker", "value"),
)
def update_output(dates):
    prefix = "You have selected from "
    if None not in dates:
        return prefix + "   to   ".join(dates)
    else:
        raise PreventUpdate
```
### Presets

Use `presets` prop to add custom date presets. Presets are displayed next to the calendar:

```python
from datetime import date, timedelta
from dateutil.relativedelta import relativedelta
import dash_mantine_components as dmc


today = date.today()

component = dmc.DatePickerInput(
    label="With presets",
    placeholder="Select date",
    presets=[
        {
            "value": (today - timedelta(days=1)).isoformat(),
            "label": "Yesterday",
        },
        {
            "value": today.isoformat(),
            "label": "Today",
        },
        {
            "value": (today + timedelta(days=1)).isoformat(),
            "label": "Tomorrow",
        },
        {
            "value": (today + relativedelta(months=1)).isoformat(),
            "label": "Next month",
        },
        {
            "value": (today + relativedelta(years=1)).isoformat(),
            "label": "Next year",
        },
        {
            "value": (today - relativedelta(months=1)).isoformat(),
            "label": "Last month",
        },
        {
            "value": (today - relativedelta(years=1)).isoformat(),
            "label": "Last year",
        },
    ],
    maw=200
)
```
To use `presets` with `type="range"`, define value a tuple of two dates:

```python
from datetime import date, timedelta
from dateutil.relativedelta import relativedelta
import dash_mantine_components as dmc


today = date.today()

component = dmc.DatePickerInput(
    type="range",
    label="With presets",
    placeholder="Select date",
    presets=[
        {
            "value": [
                (today - timedelta(days=2)).isoformat(),
                today.isoformat(),
            ],
            "label": "Last two days",
        },
        {
            "value": [
                (today - timedelta(days=7)).isoformat(),
                today.isoformat(),
            ],
            "label": "Last 7 days",
        },
        {
            "value": [
                today.replace(day=1).isoformat(),
                today.isoformat(),
            ],
            "label": "This month",
        },
        {
            "value": [
                (today - relativedelta(months=1)).replace(day=1).isoformat(),
                (today.replace(day=1) - timedelta(days=1)).isoformat(),
            ],
            "label": "Last month",
        },
        {
            "value": [
                date(today.year - 1, 1, 1).isoformat(),
                date(today.year - 1, 12, 31).isoformat(),
            ],
            "label": "Last year",
        },
    ],
    maw=320
)
```
### Open picker in modal

By default, `DatePickerInput` is rendered inside `Popover`. You can change that to `Modal` by setting `dropdownType="modal"`

```python
from datetime import datetime

import dash_mantine_components as dmc

component = dmc.DatePickerInput(
    value=datetime.now().date(),
    dropdownType="modal",
    w=200,
)
```
### Number of columns

```python
import dash_mantine_components as dmc

component = dmc.DatePickerInput(w=250, type="range", numberOfColumns=2)
```
### Value format

Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label.

```python
from datetime import datetime

import dash_mantine_components as dmc

component = dmc.Group(
    gap="xl",
    children=[
        dmc.DatePickerInput(
            value=datetime.now().date(),
            valueFormat="ddd, MMM D YY",
            label="ddd, MMM D YY",
            w=200,
        ),
        dmc.DatePickerInput(
            value=datetime.now().date(),
            valueFormat="MMMM DD, YY",
            label="MMMM DD, YY",
            w=200,
        ),
        dmc.DatePickerInput(
            value=datetime.now().date(),
            valueFormat="DD-MM-YYYY",
            label="DD-MM-YYYY",
            w=200,
        ),
    ],
)
```
### 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.Stack(
    [
        dmc.DatePickerInput(
            value=datetime.now().date(),
            label="Date not clearable",
            w=200,
        ),
        dmc.DatePickerInput(
            value=datetime.now().date(),
            label="Date clearable",
            w=200,
            clearable=True,
        ),
    ]
)
```
### Error Display

You can convey errors in your date picker by setting the `error` prop. For instance, in the below example we try to
convey the user that it's a required field and the date can't be an odd date. Since it's a required field, we also
set `clearable=False`.

```python
from datetime import datetime

import dash_mantine_components as dmc
from dash import Output, Input, callback

component = dmc.DatePickerInput(
    id="datepickerinput-error",
    value=datetime.now().date(),
    label="Date",
    required=True,
    clearable=False,
    w=200,
)


@callback(Output("datepickerinput-error", "error"), Input("datepickerinput-error", "value"))
def datepicker_error(date):
    day = datetime.strptime(date, "%Y-%M-%d").day
    return "Please select an even date." if day % 2 else ""
```
### Localization

For information on setting locale, have a look at the [DatesProvider](/components/datesprovider) component.


### 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.



#### DatePickerInput selectors

| Selector                  | Static selector                                      | Description                                                        |
| ------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------ |
| wrapper                   | `.mantine-DatePickerInput-wrapper`                   | Root element of the Input                                          |
| input                     | `.mantine-DatePickerInput-input`                     | Input element                                                      |
| section                   | `.mantine-DatePickerInput-section`                   | Left and right sections                                            |
| root                      | `.mantine-DatePickerInput-root`                      | Root element                                                       |
| label                     | `.mantine-DatePickerInput-label`                     | Label element                                                      |
| required                  | `.mantine-DatePickerInput-required`                  | Required asterisk element, rendered inside label                   |
| description               | `.mantine-DatePickerInput-description`               | Description element                                                |
| error                     | `.mantine-DatePickerInput-error`                     | Error element                                                      |
| calendarHeader            | `.mantine-DatePickerInput-calendarHeader`            | Calendar header root element                                       |
| calendarHeaderControl     | `.mantine-DatePickerInput-calendarHeaderControl`     | Previous/next calendar header controls                             |
| calendarHeaderControlIcon | `.mantine-DatePickerInput-calendarHeaderControlIcon` | Icon of previous/next calendar header controls                     |
| calendarHeaderLevel       | `.mantine-DatePickerInput-calendarHeaderLevel`       | Level control (changes levels when clicked, month → year → decade) |
| levelsGroup               | `.mantine-DatePickerInput-levelsGroup`               | Group of months levels                                             |
| yearsList                 | `.mantine-DatePickerInput-yearsList`                 | Years list table element                                           |
| yearsListRow              | `.mantine-DatePickerInput-yearsListRow`              | Years list row element                                             |
| yearsListCell             | `.mantine-DatePickerInput-yearsListCell`             | Years list cell element                                            |
| yearsListControl          | `.mantine-DatePickerInput-yearsListControl`          | Button used to pick months and years                               |
| monthsList                | `.mantine-DatePickerInput-monthsList`                | Months list table element                                          |
| monthsListRow             | `.mantine-DatePickerInput-monthsListRow`             | Months list row element                                            |
| monthsListCell            | `.mantine-DatePickerInput-monthsListCell`            | Months list cell element                                           |
| monthsListControl         | `.mantine-DatePickerInput-monthsListControl`         | Button used to pick months and years                               |
| monthThead                | `.mantine-DatePickerInput-monthThead`                | `thead` element of month table                                     |
| monthRow                  | `.mantine-DatePickerInput-monthRow`                  | `tr` element of month table                                        |
| monthTbody                | `.mantine-DatePickerInput-monthTbody`                | `tbody` element of month table                                     |
| monthCell                 | `.mantine-DatePickerInput-monthCell`                 | `td` element of month table                                        |
| month                     | `.mantine-DatePickerInput-month`                     | Month table element                                                |
| weekdaysRow               | `.mantine-DatePickerInput-weekdaysRow`               | Weekdays `tr` element                                              |
| weekday                   | `.mantine-DatePickerInput-weekday`                   | Weekday `th` element                                               |
| day                       | `.mantine-DatePickerInput-day`                       | Month day control                                                  |
| weekNumber                | `.mantine-DatePickerInput-weekNumber`                | Week number `td` element                                           |
| datePickerRoot            | `.mantine-DatePickerInput-datePickerRoot`            | Date picker root element, contains calendar and presets            |
| presetsList               | `.mantine-DatePickerInput-presetsList`               | Presets wrapper element                                            |
| presetButton              | `.mantine-DatePickerInput-presetButton`              | Preset button                                                      |
| placeholder               | `.mantine-DatePickerInput-placeholder`               | Placeholder element                                                |



#### DatePickerInput 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
#### DatePickerInput

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- allowDeselect (boolean; optional):
    Determines whether user can deselect the date by clicking on
    selected item, applicable only when type="default".

- allowSingleDateInRange (boolean; optional):
    Determines whether single year can be selected as range,
    applicable only when type="range".

- 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.

- closeOnChange (boolean; optional):
    Determines whether dropdown should be closed when date is
    selected, not applicable when type="multiple", True 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 | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- 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.

- maxLevel (a value equal to: 'month', 'year', 'decade'; optional):
    Max level that user can go up to (decade, year, month), defaults
    to decade.

- 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.

- tabIndex (number; optional):
    tab-index.

- type (a value equal to: 'default', 'multiple', 'range'; default 'default'):
    Picker type: range, multiple or default.

- value (string | list of strings; optional):
    Value for controlled component.

- valueFormat (string; optional):
    Dayjs format to display input value, "MMMM D, YYYY" 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.

- 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.