InputDate

This page contains the two variants of datepickers available in solara

InputDate

@solara.component
def InputDate(
    value: Union[solara.Reactive[Optional[dt.date]], Optional[dt.date]],
    on_value: Optional[Callable[[Optional[dt.date]], None]] = None,
    label: str = "Pick a date",
    children: List[solara.Element] = [],
    open_value: Union[solara.Reactive[bool], bool] = False,
    on_open_value: Optional[Callable[[bool], None]] = None,
    optional: bool = False,
    date_format: str = "%Y/%m/%d",
    first_day_of_the_week: int = 1,
    style: Optional[Union[str, Dict[str, str]]] = None,
    classes: Optional[List[str]] = None,
    date_picker_type: str = "date",
    min_date: Optional[str] = None,
    max_date: Optional[str] = None,
):

    ...

Show a textfield, which when clicked, opens a datepicker. The input date should be of type datetime.date.

Basic Example

import solara
import solara.lab
import datetime as dt


@solara.component
def Page():
    date = solara.use_reactive(dt.date.today())

    solara.lab.InputDate(date)
    solara.Text(str(date.value))

Pick a date

2024-09-24

Live output

Arguments

value: Reactive variable of type datetime.date, or None. This date is selected the first time the component is rendered.
on_value: a callback function for when value changes. The callback function receives the new value as an argument.
label: Text used to label the text field that triggers the datepicker.
children: List of Elements to be rendered under the calendar. If empty, a close button is rendered.
open_value: Controls and communicates the state of the datepicker. If True, the datepicker is open. If False, the datepicker is closed. Intended to be used in conjunction with a custom set of controls to close the datepicker.
on_open_value: a callback function for when open_value changes. Also receives the new value as an argument.
optional: Determines whether to show an error when value is None. If True, no error is shown.
date_format: Sets the format of the date displayed in the text field. Defaults to "%Y/%m/%d". For more information, see the Python documentation.
first_day_of_the_week: Sets the first day of the week, as an int starting count from Sunday (=0). Defaults to 1, which is Monday.
style: CSS style to apply to the text field. Either a string or a dictionary of CSS properties (i.e. {"property": "value"}).
classes: List of CSS classes to apply to the text field.
date_picker_type: Sets the type of the datepicker. Use "date" for date selection or "month" for month selection. Defaults to "date".
min_date: Earliest allowed date/month (ISO 8601 format). If not specified, there is no limit.
max_date: Latest allowed date/month (ISO 8601 format). If not specified, there is no limit.

InputDateRange

@solara.component
def InputDateRange(
    value: Union[solara.Reactive[Tuple[Optional[dt.date], Optional[dt.date]]], Tuple[Optional[dt.date], Optional[dt.date]]],
    on_value: Optional[Callable[[Optional[Tuple[Optional[dt.date], Optional[dt.date]]]], None]] = None,
    label: str = "Select dates",
    children: List[solara.Element] = [],
    open_value: Union[solara.Reactive[bool], bool] = False,
    on_open_value: Optional[Callable[[bool], None]] = None,
    optional: bool = False,
    date_format: str = "%Y/%m/%d",
    first_day_of_the_week: int = 1,
    style: Optional[Union[str, Dict[str, str]]] = None,
    classes: Optional[List[str]] = None,
    date_picker_type: str = "date",
    min_date: Optional[str] = None,
    max_date: Optional[str] = None,
    sort: Optional[bool] = False,
):

    ...

Show a textfield, which when clicked, opens a datepicker that allows users to select a range of dates by choosing a starting and ending date. The input dates should be stored in a reactive tuple of type datetime.date. The list should contain either precisely two elements. For an empty pre-selection of dates, pass a reactive empty list.

Basic Example

import solara
import solara.lab
import datetime as dt


@solara.component
def Page():
    dates = solara.use_reactive(tuple([dt.date.today(), dt.date.today() + dt.timedelta(days=1)]))

    solara.lab.InputDateRange(dates)
    solara.Text(str(dates.value))

Select dates

(datetime.date(2024, 9, 24), datetime.date(2024, 9, 25))

Live output

Arguments

value: Tuple with elements of type datetime.date. For an empty pre-selection of dates, pass an empty tuple.
on_value: a callback function for when value changes. The callback function receives the new value as an argument.
label: Text used to label the text field that triggers the datepicker.
children: List of Elements to be rendered under the calendar. If empty, a close button is rendered.
open_value: Controls and communicates the state of the datepicker. If True, the datepicker is open. If False, the datepicker is closed. Intended to be used in conjunction with a custom set of controls to close the datepicker.
on_open_value: a callback function for when open_value changes. Also receives the new value as an argument.
date_format: Sets the format of the date displayed in the text field. Defaults to "%Y/%m/%d". For more information, see the Python documentation.
optional: Determines whether go show an error when value is None. If True, no error is shown.
first_day_of_the_week: Sets the first day of the week, as an int starting count from Sunday (=0). Defaults to 1, which is Monday.
style: CSS style to apply to the text field. Either a string or a dictionary of CSS properties (i.e. {"property": "value"}).
classes: List of CSS classes to apply to the text field.
date_picker_type: Sets the type of the datepicker. Use "date" for date selection or "month" for month selection. Defaults to "date".
min_date: Earliest allowed date/month (ISO 8601 format). If not specified, there is no limit.
max_date: Latest allowed date/month (ISO 8601 format). If not specified, there is no limit.
sort: If True, selected dates will be sorted in ascending order, regardless of the order they were picked. If False, preserves the order the dates were selected.

A More Advanced Example

import solara
import solara.lab
import datetime as dt


@solara.component
def Page():
    date = solara.use_reactive(tuple([dt.date.today(), None]))
    range_is_open = solara.use_reactive(False)
    stay_length = solara.use_reactive(1)

    def set_end_date(value):
        if value and value[0]:
            value = value[0]
            second_date = value + dt.timedelta(days=stay_length.value)
            date.set([value, second_date])

    def book():
        # Do some stuff here
        range_is_open.set(False)

    solara.use_memo(lambda: set_end_date(date.value), [stay_length.value])

    with solara.Column(style="width: 400px;"):
        solara.IntSlider("Length of stay", stay_length, min=1, max=10)
        with solara.lab.InputDateRange(
            date,
            on_value=set_end_date,
            open_value=range_is_open,
        ):
            with solara.Row(justify="end", style="width: 100%;"):
                solara.Button(
                    label="Book",
                    color="primary",
                    on_click=book,
                )

Length of stay

Select dates

Live output

A More Advanced Example