datepicker

Datepicker

from dara.components.common.datepicker import Datepicker

class Datepicker(FormComponent)

A component for selecting a date from a calendar. The passed value must be a Variable instance and will be updated with the underlying value when a date is selected. Also optionally takes min/max dates allowed values, a date format string, whether to close the component when a date is selected, if time should be shown and whether to allow a range selection.

The values coming out of from Datepicker are always a string in ISO format, in the user's local timezone.

A single Datepicker component that tracks the chosen value is created via:

from dara.core import Variable
from dara.components.common import Datepicker

Datepicker(
    value=Variable()
)

A Datepicker component that allows to choose between a date range is created via:

from dara.core import Variable
from dara.components.common import Datepicker

Datepicker(
    value=Variable()
    range=True,
)

A more complicated example with an initial date, has a custom format, and does not close on selection is created via:

from datetime import datetime
from dara.core import Variable
from dara.components.common import Datepicker

Datepicker(
    value=Variable(datetime(2021, 9, 18)),
    date_format='MM/dd/yyyy',
    enable_time=True,
    max_date=datetime(2023, 12, 21),
    min_date=datetime(2020, 3, 20),
    select_close=False,
),

Arguments:

• value: A Variable with the initial date value
• date_format: A string specifying the format in which to display the date to the user, it does not affect the return value. The format it understands follows that defined by date-fns
• enable_time: Boolean, if True display the time
• max_date: An optional value specifying the maximum date
• min_date: An optional value specifying the minimum date
• range: Boolean, if True then the datepicker will allow a date range to be selected
• select_close: Boolean, if True then close when a date has been selected
• onchange: Action triggered when the selected datetime has changed
• id: the key to be used if this component is within a form

Attributes

• value:
• date_format: str
• enable_time: bool
• max_date: Optional[datetime]
• min_date: Optional[datetime]
• range: bool
• select_close: bool
• onchange: Optional[Action]
• id: Optional[str]