DatePickerRange Examples and Reference


Simple DatePickerRange Example

This is a simple example of a DatePickerRange
component tied to a callback. You can use either strings in the form
YYYY-MM-DD or date objects from the datetime module to provide
dates to Dash components. Strings are preferred because that’s the form
dates take as callback arguments. If you are using date objects, we
recommend using datetime.date so there is no time part.
DatePickerRange will accept dates with a time part, but this can
be confusing, particularly for the initial call of a callback. After
the user chooses a new date there will be no time part, only the date.
If you already have a datetime.datetime object, you can easily convert
it with .date(). The min_date_allowed and max_date_allowed
properties define the minimum and maximum selectable dates on the calendar
while initial_visible_month defines the calendar month that is
first displayed when the DatePickerRange component is opened.

from datetime import date
import dash
import dash_html_components as html
import dash_core_components as dcc
import re

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.DatePickerRange(
        id='my-date-picker-range',
        min_date_allowed=date(1995, 8, 5),
        max_date_allowed=date(2017, 9, 19),
        initial_visible_month=date(2017, 8, 5),
        end_date=date(2017, 8, 25)
    ),
    html.Div(id='output-container-date-picker-range')
])


@app.callback(
    dash.dependencies.Output('output-container-date-picker-range', 'children'),
    [dash.dependencies.Input('my-date-picker-range', 'start_date'),
     dash.dependencies.Input('my-date-picker-range', 'end_date')])
def update_output(start_date, end_date):
    string_prefix = 'You have selected: '
    if start_date is not None:
        start_date_object = date.fromisoformat(start_date)
        start_date_string = start_date_object.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'Start Date: ' + start_date_string + ' | '
    if end_date is not None:
        end_date_object = date.fromisoformat(end_date)
        end_date_string = end_date_object.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'End Date: ' + end_date_string
    if len(string_prefix) == len('You have selected: '):
        return 'Select a date to see it displayed here'
    else:
        return string_prefix


if __name__ == '__main__':
    app.run_server(debug=True)

Month and Display Format

The display_format property
determines how selected dates are displayed
in the DatePickerRange component. The month_format
property determines how calendar headers are displayed when
the calendar is opened.

Both of these properties are configured through strings that utilize a combination of any of the following tokens.

String Token Example Description

YYYY

2014

4 or 2 digit year

YY

14

2 digit year

Y

-25

Year with any number of digits and sign

Q

1..4

Quarter of year. Sets month to first month in quarter.

M MM

1..12

Month number

MMM MMMM

Jan..December

Month name

D DD

1..31

Day of month

Do

1st..31st

Day of month with ordinal

DDD DDDD

1..365

Day of year

X

1410715640.579

Unix timestamp

x

1410715640579

Unix ms timestamp

Display Format Examples

You can utilize any permutation of the string tokens
shown in the table above to change how selected dates are
displayed in the DatePickerRange component.

import dash_core_components as dcc
from datetime import date

dcc.DatePickerRange(
    end_date=date(2017,6,21),
    display_format='MMM Do, YY',
    start_date_placeholder_text='MMM Do, YY'
)  
import dash_core_components as dcc
from datetime import date
dcc.DatePickerRange(
    end_date=date(2017,6,21),
    display_format='M-D-Y-Q',
    start_date_placeholder_text='M-D-Y-Q'
)  
import dash_core_components as dcc
from datetime import date

dcc.DatePickerRange(
    end_date=date(2017,6,21),
    display_format='MMMM Y, DD',
    start_date_placeholder_text='MMMM Y, DD'
)  
import dash_core_components as dcc
from datetime import date

dcc.DatePickerRange(
    end_date=date(2017,6,21),
    display_format='X',
    start_date_placeholder_text='X'
)  

Month Format Examples

Similar to the display_format, you can set month_format
to any permutation of the string tokens
shown in the table above to change how calendar titles
are displayed in the DatePickerRange component.

import dash_core_components as dcc
from datetime import date

dcc.DatePickerRange(
    month_format='MMM Do, YY',
    end_date_placeholder_text='MMM Do, YY',
    start_date=date(2017,6,21)
)  
import dash_core_components as dcc
from datetime import date

dcc.DatePickerRange(
    month_format='M-D-Y-Q',
    end_date_placeholder_text='M-D-Y-Q',
    start_date=date(2017,6,21)
)  
import dash_core_components as dcc
from datetime import date

dcc.DatePickerRange(
    month_format='MMMM Y',
    end_date_placeholder_text='MMMM Y',
    start_date=date(2017,6,21)
)  
import dash_core_components as dcc
from datetime import date

dcc.DatePickerRange(
    month_format='X',
    end_date_placeholder_text='X',
    start_date=date(2017,6,21)
)  

Vertical Calendar and Placeholder Text

The DatePickerRange component can be rendered in two
orientations, either horizontally or vertically.
If calendar_orientation is set to 'vertical', it will
be rendered vertically and will default to 'horizontal'
if not defined.

The start_date_placeholder_text and
end_date_placeholder_text define the grey default text
defined in the calendar input boxes when no date is
selected.

import dash_core_components as dcc

dcc.DatePickerRange(
    start_date_placeholder_text="Start Period",
    end_date_placeholder_text="End Period",
    calendar_orientation='vertical',
)  

Minimum Nights, Calendar Clear, and Portals

The minimum_nights property defines the number of
nights that must be in between the range of two
selected dates.

When the clearable property is set to True
the component will be rendered with a small ‘x’
that will remove all selected dates when selected.

The DatePickerRange component supports two different
portal types, one being a full screen portal
(with_full_screen_portal) and another being a simple
screen overlay, like the one shown below (with_portal).

import dash_core_components as dcc
from datetime import date

dcc.DatePickerRange(
    minimum_nights=5,
    clearable=True,
    with_portal=True,
    start_date=date(2017,6,21)
)  

Right to Left Calendars and First Day of Week

When the is_RTL property is set to True
the calendar will be rendered from right to left.

The first_day_of_week property allows you to
define which day of the week will be set as the first
day of the week. In the example below, Tuesday is
the first day of the week.

import dash_core_components as dcc
from datetime import date

dcc.DatePickerRange(
    is_RTL=True,
    first_day_of_week=3,
    start_date=date(2017,6,21)
)  

DatePickerRange Properties

Access this documentation in your Python terminal with:
```python

help(dash_core_components.DatePickerRange)
```

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise
.

id (string; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

calendar_orientation (a value equal to: ‘vertical’, ‘horizontal’; default 'horizontal'): Orientation of calendar, either vertical or horizontal. Valid options are ‘vertical’ or ‘horizontal’.

clearable (boolean; default False): Whether or not the dropdown is “clearable”, that is, whether or not a small “x” appears on the right of the dropdown that removes the selected value.

className (string; optional): Appends a CSS class to the wrapper div component.

day_size (number; default 39): Size of rendered calendar days, higher number means bigger day size and larger calendar overall

display_format (string; optional): Specifies the format that the selected dates will be displayed valid formats are variations of “MM YY DD”. For example: “MM YY DD” renders as ‘05 10 97’ for May 10th 1997 “MMMM, YY” renders as ‘May, 1997’ for May 10th 1997 “M, D, YYYY” renders as ‘07, 10, 1997’ for September 10th 1997 “MMMM” renders as ‘May’ for May 10 1997

disabled (boolean; default False): If True, no dates can be selected.

end_date_id (string; optional): The HTML element ID of the end date input field. Not used by Dash, only by CSS.

end_date (string; optional): Specifies the ending date for the component. Accepts datetime.datetime objects or strings in the format ‘YYYY-MM-DD’

end_date_placeholder_text (string; optional): Text that will be displayed in the second input box of the date picker when no date is selected. Default value is ‘End Date’

first_day_of_week (a value equal to: 0, 1, 2, 3, 4, 5, 6; default 0): Specifies what day is the first day of the week, values must be from [0, …, 6] with 0 denoting Sunday and 6 denoting Saturday

initial_visible_month (string; optional): Specifies the month that is initially presented when the user opens the calendar. Accepts datetime.datetime objects or strings in the format ‘YYYY-MM-DD’

is_RTL (boolean; default False): Determines whether the calendar and days operate from left to right or from right to left

loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. loading_state has the following type: dict containing keys ‘is_loading’, ‘prop_name’, ‘component_name’. Those keys have the following types:

  • is_loading (boolean; optional): Determines if the component is loading or not
  • prop_name (string; optional): Holds which property is loading
  • component_name (string; optional): Holds the name of the component that is loading

min_date_allowed (string; optional): Specifies the lowest selectable date for the component. Accepts datetime.datetime objects or strings in the format ‘YYYY-MM-DD’

max_date_allowed (string; optional): Specifies the highest selectable date for the component. Accepts datetime.datetime objects or strings in the format ‘YYYY-MM-DD’

minimum_nights (number; optional): Specifies a minimum number of nights that must be selected between the startDate and the endDate

month_format (string; optional): Specifies the format that the month will be displayed in the calendar, valid formats are variations of “MM YY”. For example: “MM YY” renders as ‘05 97’ for May 1997 “MMMM, YYYY” renders as ‘May, 1997’ for May 1997 “MMM, YY” renders as ‘Sep, 97’ for September 1997

number_of_months_shown (number; default 1): Number of calendar months that are shown when calendar is opened

persistence (boolean | string | number; 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, any persisted_props that the user has changed while using the app will keep those changes, as long as the new prop value also matches what was given originally. Used in conjunction with persistence_type and persisted_props.

persisted_props (list of a value equal to: ‘start_date’, ‘end_date’s; default ['start_date', 'end_date']): Properties whose user interactions will persist after refreshing the component or the page.

persistence_type (a value equal to: ‘local’, ‘session’, ‘memory’; default 'local'): 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.

reopen_calendar_on_clear (boolean; default False): If True, the calendar will automatically open when cleared

start_date (string; optional): Specifies the starting date for the component. Accepts datetime.datetime objects or strings in the format ‘YYYY-MM-DD’

start_date_id (string; optional): The HTML element ID of the start date input field. Not used by Dash, only by CSS.

start_date_placeholder_text (string; optional): Text that will be displayed in the first input box of the date picker when no date is selected. Default value is ‘Start Date’

stay_open_on_select (boolean; default False): If True the calendar will not close when the user has selected a value and will wait until the user clicks off the calendar

show_outside_days (boolean; optional): If True the calendar will display days that rollover into the next month

style (dict; optional): CSS styles appended to wrapper div

updatemode (a value equal to: ‘singledate’, ‘bothdates’; default 'singledate'): Determines when the component should update its value. If bothdates, then the DatePicker will only trigger its value when the user has finished picking both dates. If singledate, then the DatePicker will update its value as one date is picked.

with_portal (boolean; default False): If True, calendar will open in a screen overlay portal, not supported on vertical calendar

with_full_screen_portal (boolean; default False): If True, calendar will open in a full screen overlay portal, will take precedent over ‘withPortal’ if both are set to true, not supported on vertical calendar