DatePicker

Introduction

DatePicker widget in Supervsely is a user-friendly and customizable date input solution for Supervisely app developers. It features an intuitive interface that allows users to select a date from a calendar or enter one manually. The widget supports a wide range of date formats, making it suitable for use in diverse applications. With its flexible styling options, the DatePicker component can seamlessly integrate with apps and enhance the user experience.

Function signature

date_picker = DatePicker(
    value=None,
    placeholder="Select date",
    picker_type="date",
    size=None,
    readonly=False,
    disabled= False,
    editable=True,
    clearable=True,
    format="yyyy-MM-dd",
    first_day_of_week=1,
    widget_id=None,
)

Parameters

Parameters Type Description

Parameters	Type	Description
`value`	`Union[int, str, list, tuple]`	Default value to date picker
`placeholder`	`str = "Select`	Date picker input help text
`picker_type`	`Literal["year", "month", "date", "datetime", "week", "datetimerange", "daterange"]`	Date picker type
`size`	`Literal["large", "small", "mini", None]`	Determine widget size.
`readonly`	`bool`	Specifies that a date picker input should be read-only
`disabled`	`bool`	Disable widget
`editable`	`bool`	Allows to edit date picker input value text
`clearable`	`bool`	Allows to delete value by clicking
`first_day_of_week`	`int`	Determine first day of the week
`format`	`str`	Determine value displaying format
`widget_id`	`str`	ID of the widget

value

Union[int, str, list, tuple]

Default value to date picker

placeholder

str = "Select

Date picker input help text

picker_type

Literal["year", "month", "date", "datetime", "week", "datetimerange", "daterange"]

Date picker type

size

Literal["large", "small", "mini", None]

Determine widget size.

readonly

bool

Specifies that a date picker input should be read-only

disabled

bool

Disable widget

editable

bool

Allows to edit date picker input value text

clearable

bool

Allows to delete value by clicking

first_day_of_week

int

Determine first day of the week

format

str

Determine value displaying format

widget_id

str

ID of the widget

value

Default value to date picker

type: Union[int, str, list, tuple]

default value: None

date_picker = DatePicker(value="2023 13 03")

placeholder

Date picker input help text

type: str

default value: Select date"

date_picker = DatePicker(placeholder="placeholder")

picker_type

Date picker type

type: Literal["year", "month", "date", "datetime", "week", "datetimerange", "daterange"]

default value: "date"

date_picker = DatePicker(picker_type="year")

date_picker = DatePicker(picker_type="month")

date_picker = DatePicker(picker_type="week")

date_picker = DatePicker(picker_type="date")

date_picker = DatePicker(picker_type="datetime")

date_picker = DatePicker(picker_type="daterange")

date_picker = DatePicker(picker_type="datetimerange")

size

Determine widget size

type: Literal["large", "small", "mini", None]

default value: None

date_picker = DatePicker(size="mini")

date_picker = DatePicker(size="small")

date_picker = DatePicker(size="large")

readonly

Specifies that a date picker input should be read-only

type: bool

default value: False

date_picker = DatePicker(
    value="2023 03 21",
    readonly=True,
)

disabled

Disable widget

type: bool

default value: False

date_picker = DatePicker(disabled=True)

editable

Allows to edit date picker input value text

type: bool

default value: True

date_picker = DatePicker(editable=True)

clearable

Allows to delete value by clicking

type: bool

default value: True

date_picker = DatePicker(clearable=True)

date_picker = DatePicker(
    editable=False,
    clearable=False,
)

format

Determine value displaying format

type: str

default value: "yyyy-MM-dd"

date_picker = DatePicker(format="dd/MM/yyyy")

first_day_of_week

Determine first day of the week

type: int

default value: 1

date_picker = DatePicker(first_day_of_week=4)

widget_id

ID of the widget

type: str

default value: None

Methods and attributes

Attributes and Methods Description

Attributes and Methods	Description
`get_value()`	Get date picker datetime string value
`set_value(value: Union[int, str, datetime])`	Set date picker value
`set_range_values(values: Union[list, tuple])`	Set date range picker values
`clear_value()`	Clear date picker value
`@value_changed`	Decorator function is handled when date picker value is changed value

get_value()

Get date picker datetime string value

set_value(value: Union[int, str, datetime])

Set date picker value

set_range_values(values: Union[list, tuple])

Set date range picker values

clear_value()

Clear date picker value

@value_changed

Decorator function is handled when date picker value is changed value

Mini App Example

You can find this example in our Github repository:

supervisely-ecosystem/ui-widgets-demos/input/005_date_picker/src/main.py

Import libraries

import os

import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Button, Card, Container, DatePicker, Text

Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

if sly.is_development():
    load_dotenv("local.env")
    load_dotenv(os.path.expanduser("~/supervisely.env"))

api: sly.Api = sly.Api.from_env()

Initialize `DatePicker` widgets

daterange_picker = DatePicker(
    editable=False,
    placeholder="Select date range",
    picker_type="daterange",
)

date_picker = DatePicker(
    editable=False,
)

Create `Button`, `Text` widgets we will use in UI for demo

text = Text()
button_clear = Button("Clear")
button_default = Button("Set default")

Create app layout

Prepare a layout for app using Card widget with the content parameter and place widget that we've just created in the Container widget.

controls_container = Container([button_clear, button_default], direction="horizontal")
middle_container = Container([controls_container, text])

card = Card(
    "Date Picker",
    content=Container([daterange_picker, middle_container, date_picker], direction="horizontal"),
)


layout = Container(widgets=[card])

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Add functions to control widgets from code

def _check_dates(value1, value2):
    from datetime import datetime

    if value1 is None or value2 is None:
        text.set(text="", status="info")
        return

    def _get_datetime(val: str):
        val = val.replace("T", " ").replace("Z", "")
        return datetime.strptime(val, "%Y-%m-%d %H:%M:%S.%f")

    if _get_datetime(value2[0]) <= _get_datetime(value1) <= _get_datetime(value2[1]):
        text.set(text="Date 1 in daterange.", status="success")
        return
    text.set(text="Date 1 not in daterange.", status="error")


@date_picker.value_changed
def check_date(date_value):
    daterange_value = daterange_picker.get_value()
    _check_dates(date_value, daterange_value)


@daterange_picker.value_changed
def check_daterange(daterange_value):
    date_value = date_picker.get_value()
    _check_dates(date_value, daterange_value)


@button_clear.click
def clear_dates():
    date_picker.clear_value()
    daterange_picker.clear_value()


@button_default.click
def set_default():
    from datetime import datetime, timedelta

    now = datetime.now()
    yesterday = now - timedelta(days=1)
    tomorrow = now + timedelta(days=1)

    date_picker.set_value(now)
    daterange_picker.set_range_values([yesterday, tomorrow])