express.ui.input_date(id, label, *, value=None, min=None, max=None, format='yyyy-mm-dd', startview='month', weekstart=0, language='en', width=None, autoclose=True, datesdisabled=None, daysofweekdisabled=None)

Creates a text input which, when clicked on, brings up a calendar that the user can click on to select dates.


id: str

An input id.

label: TagChild

An input label.

value: Optional[date | str] = None

The starting 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. Defaults to "yyyy-mm-dd".

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

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.

datesdisabled: Optional[list[str]] = None

Which dates should be disabled (in yyyy-mm-dd format).

daysofweekdisabled: Optional[list[int]] = None

Days of the week that should be disabled. Should be a integer vector with values from 0 (Sunday) to 6 (Saturday).


Type Description
Tag A UI element.


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


Server value

A date object.

See Also


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

## file:
from datetime import date

from import ui

ui.input_date("date1", "Date:", value="2016-02-29")
# Default value is the date in client's time zone
ui.input_date("date2", "Date:")
# value is always yyyy-mm-dd, even if the display format is different
ui.input_date("date3", "Date:", value="2016-02-29", format="mm/dd/yy")
# Pass in a Date object
ui.input_date("date4", "Date:", value=date(2016, 2, 29))
# Use different language and different first day of week
ui.input_date("date5", "Date:", language="ru", weekstart=1)
# Start with decade view instead of default month view
ui.input_date("date6", "Date:", startview="decade")
# Disable Mondays and Tuesdays.
ui.input_date("date7", "Date:", daysofweekdisabled=[1, 2])
# Disable specific dates.
    datesdisabled=["2016-03-01", "2016-03-02"],