## DatePicker  
Inline date, multiple dates and dates range picker  
Category: Date Pickers  

> Looking for a date picker with an input field and a dropdown calendar? Try `DateInput` or `DatePickerInput`.

### Simple Example

This is a simple example of `DatePicker` with a callback. Use a string in the format 'YYYY-MM-DD'.

```python
import dash_mantine_components as dmc
from dash import Input, Output, html, callback


component = dmc.Stack([
    dmc.DatePicker(id="date-picker"),
    dmc.Text(id="selected-date-picker", mt=10),
], align="center")


@callback(
    Output("selected-date-picker", "children"), Input("date-picker", "value")
)
def update_output(d):
    return f"You selected {d}"
```
### Allow deselect
Set `allowDeselect` to allow user to deselect current selected date by clicking on it. `allowDeselect` is disregarded
when `type` prop is `range` or `multiple`. When date is deselected the value is None.


```python
import dash_mantine_components as dmc
from dash import Input, Output, html, callback


component = dmc.Stack([
    dmc.DatePicker(
        id="date-picker-allow-deselect",
        allowDeselect=True
    ),
    dmc.Text(id="date-picker-out-allow-deselect"),

], align="center")


@callback(
    Output("date-picker-out-allow-deselect", "children"), Input("date-picker-allow-deselect", "value")
)
def update_output(d):
    return f"You selected {d}"
```
### Multiple dates
Set `type="multiple"` to allow user to pick multiple dates.  Note that value must be a list.


```python
import dash_mantine_components as dmc
from dash import Input, Output, html, callback


component = dmc.Stack([
    dmc.DatePicker(
        id="date-picker-multiple",
        value=[],
        type="multiple"
    ),
    dmc.Text(id="date-picker-out-multiple"),

], align="center")


@callback(
    Output("date-picker-out-multiple", "children"), Input("date-picker-multiple", "value")
)
def update_output(d):
    return f"You selected {str(d)}"
```
### Dates range
Set `type="range"` to allow user to pick dates range. Note that value must be a list.


```python
import dash_mantine_components as dmc
from dash import Input, Output, html, callback


component = dmc.Stack([
    dmc.DatePicker(
        id="date-picker-range",
        value=[],
        type="range"
    ),
    dmc.Text(id="date-picker-out-range"),

], align="center")


@callback(
    Output("date-picker-out-range", "children"), Input("date-picker-range", "value")
)
def update_output(d):
    return f"You selected {str(d)}"
```
### Single date in range
By default, it is not allowed to select single date as range – when user clicks the same date second time it is
deselected. To change this behavior set `allowSingleDateInRange=True` prop. `allowSingleDateInRange` is ignored 
when type prop is not range.


```python
import dash_mantine_components as dmc
from dash import Input, Output, html, callback


component = dmc.Stack([
    dmc.DatePicker(
        id="date-picker-range-s",
        value=[],
        type="range",
        allowSingleDateInRange=True
    ),
    dmc.Text(id="date-picker-out-range-s"),

], align="center")


@callback(
    Output("date-picker-out-range-s", "children"), Input("date-picker-range-s", "value")
)
def update_output(d):
    return f"You selected {str(d)}"
```
### 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.Center(
    dmc.DatePicker(
        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",
            },
        ]
    )
)
```
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.Center(
    dmc.DatePicker(
        type="range",
        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",
            },
        ],
    )
)
```
### Default date

Use `defaultDate` prop to set date value that will be used to determine which year should be displayed initially. For 
example to display 2015 February month set `defaultDate="2015-02-01"`. If value is not specified, then defaultDate will
use today's date. Day, minutes and seconds are ignored in provided date, only year and month data is used – you can 
specify any date value.


```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(defaultDate="2015-02-01")
)
```
### Level
Set `level` prop to configure initial level that will be displayed:

```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.DatePicker(level="decade"),
    dmc.DatePicker(level="year")
], justify="center")
```
### Hide outside dates
Set `hideOutsideDates=True` to remove all dates that do not belong to the current month:

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(hideOutsideDates=True)
)
```
### Display week numbers
Set `withWeekNumbers=True` to display week numbers:

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(withWeekNumbers=True)
)
```
### First day of week
Set `firstDayOfWeek` prop to configure first day of week. The prop accepts number from 0 to 6, where 0 is Sunday and 6
is Saturday. Default value is 1 – Monday. You can also configure this option for all components with `DatesProvider`.


```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.DatePicker(firstDayOfWeek=0),
    dmc.DatePicker(firstDayOfWeek=6)
], justify="center", gap="xl")
```
### Hide weekdays
Set `hideWeekdays=True` to hide weekdays names:

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(hideWeekdays=True)
)
```
### Weekend days
Use `weekendDays` prop to configure weekend days. The prop accepts an array of numbers from 0 to 6, where 0 is
Sunday and 6 is Saturday. Default value is `[0, 6]` – Saturday and Sunday. You can also configure this option for
all components with DatesProvider.


```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(weekendDays=[1,2])
)
```
### Min and max date
Set `minDate` and `maxDate` props to define min and max dates. If previous/next page is not available then 
corresponding control will be disabled.


```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(
        minDate="2025-05-10",
        maxDate = "2025-05-25"
    )
)
```
### Change header controls order
Use `headerControlsOrder` prop to change order of header controls. The prop accepts a list of 'next' | 'previous' | 'level'.
Note that each control can be used only once in the list.


```python
import dash_mantine_components as dmc

component = dmc.DatePicker(
    value="2025-02-01",
    headerControlsOrder = ['level', 'previous', 'next'],
    styles = {
        "calendarHeaderLevel": {
            "justifyContent": 'flex-start',
            "paddingInlineStart": 8,
        },
    }
)
```
### Add props to year and month control


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  

You can add props to year, month and day controls with `getYearControlProps`, `getMonthControlProps` and `getDayProps`
functions. All functions accept date as single argument, props returned from the function will be added to
year/month/day control. For example, it can be used to disable specific control or add styles:


```python

import dash_mantine_components as dmc

# Adding dayjs as external script to make it available to the function
# app = Dash(external_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"])

component = dmc.DatePicker(
    defaultDate="2025-06-01",
    getDayProps={"function": "highlightFriday13"},
    getYearControlProps={"function": "yearControlProps"},
    getMonthControlProps={"function": "monthControlProps"},
    my="lg"
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

// dayjs is loaded globally via Dash external_scripts.
// For details, see DatesProvider docs: https://www.dash-mantine-components.com/components/datesprovider
var dayjs = window.dayjs;

dmcfuncs.highlightFriday13 = function (dateStr) {
  const d = dayjs(dateStr);

  if (d.day() === 5 && d.date() === 13) {
    return {
      style: {
        backgroundColor: 'var(--mantine-color-red-filled)',
        color: 'var(--mantine-color-white)',
      },
    };
  }

  return {};
};

dmcfuncs.yearControlProps = function (dateStr) {
  const d = dayjs(dateStr);
  const currentYear = new Date().getFullYear();

  if (d.year() === currentYear) {
    return {
      style: {
        color: 'var(--mantine-color-blue-filled)',
        fontWeight: 700,
      },
    };
  }

  if (d.year() === currentYear + 1) {
    return { disabled: true };
  }

  return {};
};

dmcfuncs.monthControlProps = function (dateStr) {
  const d = dayjs(dateStr);

  if (d.month() === 1) {
    return {
      style: {
        color: 'var(--mantine-color-blue-filled)',
        fontWeight: 700,
      },
    };
  }

  if (d.month() === 5) {
    return { disabled: true };
  }

  return {};
};
```


### Render day function


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  

You can customize day rendering with renderDay prop. For example, it can be used to add `Indicator` to certain days.


```python
from dash import Dash
import dash_mantine_components as dmc


# Adding dayjs as external script to make it available to the function
# app = Dash(external_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"])


component = dmc.DatePicker(
    id="custom-day-render",
    renderDay={"function": "highlightSixteenthWithDot"}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;
var dayjs = window.dayjs;

dmcfuncs.highlightSixteenthWithDot = function (dateStr) {
  const day = dayjs(dateStr).date();

  return React.createElement(
    dmc.Indicator,
    {
      size: 9,
      color: "red",
      offset: -5,
      disabled: day !== 16, // displays indicator only on the the 16th doy of the month
    },
    React.createElement("div", null, day)
  );
};
```


### Disabled dates

#### Example 1: A List of dates
Use the `disabledDates` prop to pass a list of specific dates to disable. Dates must be strings in the YYYY-MM-DD format.

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(
        value="2024-11-05",
        defaultDate="2024-11-01",
        disabledDates=["2024-11-06", "2024-11-07",  "2024-11-08"],
        m="lg"
    )
)
```
#### Example 2: A Function


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  

The `disabledDates` prop accepts a function that receives a date string (in 'YYYY-MM-DD' format) and returns true if the date should be disabled.

This example uses [dayjs](https://day.js.org/) to simplify working with dates in JavaScript.

To use `dayjs` in your Dash app, load it as an external script:

```python
app = Dash(external_scripts=[
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"
])
```

Here, `dayjs(dateStr).day()` is used to check the day of the week. This is more reliable than manually parsing the date string and helps avoid common timezone issues.

The example below disables all dates except Fridays:


```python

import dash_mantine_components as dmc

# makes dayjs available
#app = Dash(exteral_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"])

component = dmc.Center(
    dmc.DatePicker(
        value="2024-11-08",
        defaultDate="2024-11-01",
        disabledDates={"function": "excludeDate"},
        m="lg"
    )
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.excludeDate = function(dateStr) {
   const date = dayjs(dateStr, "YYYY-MM-DD");
   return date.isValid() && date.day() !== 5;
}
```


### Number of columns
Set `numberOfColumns` prop to define number of pickers that will be rendered side by side:

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(numberOfColumns=2)
)
```
### Max level

```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.DatePicker(maxLevel="year"),
    dmc.DatePicker(maxLevel="month")
], justify="center", gap="xl")
```
### Change year and months controls format
Use `yearsListFormat` and `monthsListFormat` props to change [dayjs](https://day.js.org/docs/en/display/format) format of year/month controls:

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(monthsListFormat="MM", yearsListFormat="YY")
)
```
### Change label format
Use `decadeLabelFormat`, `yearLabelFormat` and `monthLabelFormat` props to change  [dayjs](https://day.js.org/docs/en/display/format)
format of decade/year label:


```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(
        decadeLabelFormat="YY",
        yearLabelFormat="YYYY [year]",
        monthLabelFormat="MM/YY",
    )
)
```
### 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.



#### DatePicker Selectors

| Selector                  | Static selector                                 | Description                                    |
| ------------------------- | ----------------------------------------------- | ---------------------------------------------- |
| calendarHeader            | `.mantine-DatePicker-calendarHeader`            | Calendar header root element                   |
| calendarHeaderControl     | `.mantine-DatePicker-calendarHeaderControl`     | Previous/next calendar header controls         |
| calendarHeaderControlIcon | `.mantine-DatePicker-calendarHeaderControlIcon` | Icon of previous/next calendar header controls |
| calendarHeaderLevel       | `.mantine-DatePicker-calendarHeaderLevel`       | Level control (month → year → decade)          |
| levelsGroup               | `.mantine-DatePicker-levelsGroup`               | Group of months levels                         |
| yearsList                 | `.mantine-DatePicker-yearsList`                 | Years list table element                       |
| yearsListRow              | `.mantine-DatePicker-yearsListRow`              | Years list row element                         |
| yearsListCell             | `.mantine-DatePicker-yearsListCell`             | Years list cell element                        |
| yearsListControl          | `.mantine-DatePicker-yearsListControl`          | Button used to pick months and years           |
| monthsList                | `.mantine-DatePicker-monthsList`                | Months list table element                      |
| monthsListRow             | `.mantine-DatePicker-monthsListRow`             | Months list row element                        |
| monthsListCell            | `.mantine-DatePicker-monthsListCell`            | Months list cell element                       |
| monthsListControl         | `.mantine-DatePicker-monthsListControl`         | Button used to pick months and years           |
| monthThead                | `.mantine-DatePicker-monthThead`                | Thead element of month table                   |
| monthRow                  | `.mantine-DatePicker-monthRow`                  | TR element of month table                      |
| monthTbody                | `.mantine-DatePicker-monthTbody`                | Tbody element of month table                   |
| monthCell                 | `.mantine-DatePicker-monthCell`                 | TD element of month table                      |
| month                     | `.mantine-DatePicker-month`                     | Month table element                            |
| weekdaysRow               | `.mantine-DatePicker-weekdaysRow`               | Weekdays TR element                            |
| weekday                   | `.mantine-DatePicker-weekday`                   | Weekday TH element                             |
| day                       | `.mantine-DatePicker-day`                       | Month day control                              |
| weekNumber                | `.mantine-DatePicker-weekNumber`                | Week number TD element                         |



#### DatePicker Data Attributes

| Selector              | Attribute             | Condition                                    | Value                    |
| --------------------- | --------------------- | -------------------------------------------- | ------------------------ |
| calendarHeaderControl | `data-direction`      | –                                            | `"previous"` or `"next"` |
| calendarHeaderControl | `data-disabled`       | Control is disabled                          | –                        |
| monthCell             | `data-with-spacing`   | `withCellSpacing` prop is set                | –                        |
| day                   | `data-today`          | Date is today (`new Date()`)                 | –                        |
| day                   | `data-hidden`         | Outside current month and `hideOutsideDates` | –                        |
| day                   | `data-disabled`       | Disabled by props (e.g., `excludeDate`)      | –                        |
| day                   | `data-weekend`        | Day is weekend                               | –                        |
| day                   | `data-outside`        | Day is outside of current month              | –                        |
| day                   | `data-selected`       | Day is selected                              | –                        |
| day                   | `data-in-range`       | Day is in selected range                     | –                        |
| day                   | `data-first-in-range` | First day in selected range                  | –                        |
| day                   | `data-last-in-range`  | Last day in selected range                   | –                        |



### Keyword Arguments
#### DatePicker

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

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

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

- disabledDates (list of strings; optional):
    Specifies days that should be disabled.

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

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

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

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

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

- renderDay (boolean | number | string | dict | list; optional):
    A function that controls day value rendering. (See
    https://www.dash-mantine-components.com/functions-as-props).

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Component size.

- 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'; optional):
    Picker type: range, multiple or default.

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

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

- withCellSpacing (boolean; optional):
    Determines whether controls should be separated by spacing, True
    by default.

- withWeekNumbers (boolean; optional):
    Determines whether week numbers should be displayed, False by
    default.

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