This is a simple example of a
DatePickerSingle component tied to a callback. You can use either date objects (
datetime.datetime) or strings in the form
YYYY-MM-DD to provide dates to Dash components. Strings are preferred because that’s the form dates take as callback arguments. Be aware that any time information included in a datetime object or string will be ignored. The
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
DatePickerSingle component is opened.
display_format property determines how selected dates are displayed in the
DatePickerSingle 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.
||4 or 2 digit year|
||2 digit year|
||Year with any number of digits and sign|
||Quarter of year. Sets month to first month in quarter.|
||Day of month|
||Day of month with ordinal|
||Day of year|
||Unix ms timestamp|
You can utilize any permutation of the string tokens shown in the table above to change how selected dates are displayed in the
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
DatePickerSingle 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.
placeholder defines the grey default text defined in the calendar input boxes when no date is selected.
clearable property is set to
True the component will be rendered with a small ‘x’ that will remove all selected dates when selected.
DatePickerSingle 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 (
is_RTL property is set to
True the calendar will be rendered from right to left.
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.
Access this documentation in your Python terminal with:
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.
date (string; optional): Specifies the starting date for the component, best practice is to pass value via datetime object
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.
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’
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
placeholder (string; optional): Text that will be displayed in the input box of the date picker when no date is selected. Default value is ‘Start Date’
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, a
date that the user has changed while using the app will keep that change, as long as the new
date also matches what was given originally. Used in conjunction with
persisted_props (list of a value equal to: ‘date’s; default
['date']): Properties whose user interactions will persist after refreshing the component or the page. Since only
date is allowed this prop can normally be ignored.
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
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; default
True): If True the calendar will display days that rollover into the next month
style (dict; optional): CSS styles appended to wrapper div
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