express.ui.input_date_range

express.ui.input_date_range(
    id,
    label,
    *,
    start=None,
    end=None,
    min=None,
    max=None,
    format='yyyy-mm-dd',
    startview='month',
    weekstart=0,
    language='en',
    separator=' to ',
    width=None,
    autoclose=True,
)

Creates a pair of text inputs which, when clicked on, bring up calendars that the user can click on to select dates.

Parameters

id : str

An input id.

label : TagChild

An input label.

start : Optional[date | str] = None

The initial start date. Either a date object, or a string in yyyy-mm-dd format. If None (the default), will use the current date in the client’s time zone.

end : Optional[date | str] = None

The initial end date. Either a date object, or a string in yyyy-mm-dd format. If None (the default), will use the current date in the client’s time zone.

min : Optional[date | str] = None

The minimum allowed date. Either a date object, or a string in yyyy-mm-dd format.

max : Optional[date | str] = None

The maximum allowed date. Either a date object, or a string in yyyy-mm-dd format.

format : str = 'yyyy-mm-dd'

The format of the date to display in the browser.

startview : str = 'month'

The date range shown when the input object is first clicked. Can be “month” (the default), “year”, or “decade”.

weekstart : int = 0

Which day is the start of the week. Should be an integer from 0 (Sunday) to 6 (Saturday).

language : str = 'en'

The language used for month and day names. Default is “en”. Other valid values include “ar”, “az”, “bg”, “bs”, “ca”, “cs”, “cy”, “da”, “de”, “el”, “en-AU”, “en-GB”, “eo”, “es”, “et”, “eu”, “fa”, “fi”, “fo”, “fr-CH”, “fr”, “gl”, “he”, “hr”, “hu”, “hy”, “id”, “is”, “it-CH”, “it”, “ja”, “ka”, “kh”, “kk”, “ko”, “kr”, “lt”, “lv”, “me”, “mk”, “mn”, “ms”, “nb”, “nl-BE”, “nl”, “no”, “pl”, “pt-BR”, “pt”, “ro”, “rs-latin”, “rs”, “ru”, “sk”, “sl”, “sq”, “sr-latin”, “sr”, “sv”, “sw”, “th”, “tr”, “uk”, “vi”, “zh-CN”, and “zh-TW”.

separator : str = ' to '

String to display between the start and end input boxes.

width : Optional[str] = None

The CSS width, e.g. ‘400px’, or ‘100%’

autoclose : bool = True

Whether or not to close the datepicker immediately when a date is selected.

Returns

: Tag

A UI element.

Note

The date format string specifies how the date will be displayed in the browser. It allows the following values:

  • yy: Year without century (12)
  • yyyy: Year with century (2012)
  • mm: Month number, with leading zero (01-12)
  • m: Month number, without leading zero (1-12)
  • M: Abbreviated month name
  • MM: Full month name
  • dd: Day of month with leading zero
  • d: Day of month without leading zero
  • D: Abbreviated weekday name
  • DD: Full weekday name

Notes

Server value

A tuple of date objects.

See Also

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from datetime import date

from shiny.express import ui

# Default start and end is the current date in the client's time zone
ui.input_date_range("daterange1", "Date range:")
# Set start and end dates
ui.input_date_range(
    "daterange2", "Set start and end date:", start="2001-01-01", end="2010-12-31"
)
# Start and end are always specified in yyyy-mm-dd, even if the display
# format is different
ui.input_date_range(
    "daterange3",
    "Min, max, start, and end dates are set with custom format and separator:",
    start="2001-01-01",
    end="2010-12-31",
    min="2001-01-01",
    max="2012-12-21",
    format="mm/dd/yy",
    separator=" - ",
)
# Pass in Date objects
ui.input_date_range(
    "daterange4",
    "Default start and end use date objects:",
    start=date(2001, 1, 1),
    end=date(2010, 12, 31),
)
# Use different language and different first day of week
ui.input_date_range(
    "daterange5",
    "Language is German and we starts on Monday:",
    language="de",
    weekstart=1,
)
# Start with decade view instead of default month view
ui.input_date_range(
    "daterange6", "Start Date picker in Decade view:", startview="decade"
)
# Set width of the daterange field
ui.input_date_range("daterange7", "Set width of text input:", width="600px")
# Set autoclose to false
ui.input_date_range("daterange8", "Auto close is disabled:", autoclose=False)