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,
)

default

Parameters

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

Default value to date picker

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

default value: None

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

value

placeholder

Date picker input help text

type: str

default value: Select date"

date_picker = DatePicker(placeholder="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")

type-year

date_picker = DatePicker(picker_type="month")

type-month

date_picker = DatePicker(picker_type="week")

type-week

date_picker = DatePicker(picker_type="date")

type-date

date_picker = DatePicker(picker_type="datetime")

type-dt

date_picker = DatePicker(picker_type="daterange")

type-range

date_picker = DatePicker(picker_type="datetimerange")

type-dtrange

size

Determine widget size

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

default value: None

date_picker = DatePicker(size="mini")

mini

date_picker = DatePicker(size="small")

small

date_picker = DatePicker(size="large")

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,
)

readonly

disabled

Disable widget

type: bool

default value: False

date_picker = DatePicker(disabled=True)

disabled

editable

Allows to edit date picker input value text

type: bool

default value: True

date_picker = DatePicker(editable=True)

editable

clearable

Allows to delete value by clicking

type: bool

default value: True

date_picker = DatePicker(clearable=True)

clearable

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

clearable

format

Determine value displaying format

type: str

default value: "yyyy-MM-dd"

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

format

first_day_of_week

Determine first day of the week

type: int

default value: 1

date_picker = DatePicker(first_day_of_week=4)

weekday

widget_id

ID of the widget

type: str

default value: None

Methods and attributes

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

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])

layout