datetimepicker.md

DateTimePicker

Introduction

DateTimePicker is a widget in Supervisely that allows you to choose a date and time on the UI.

Function signature

DateTimePicker(
    value=None
    readonly=False,
    disabled=False,
    editable=False,
    clearable=True,
    size=None,
    placeholder="Select date and time",
    w_type="datetime",
    format="yyyy-MM-dd HH:mm:ss",
    widget_id=None,
)

Parameters

Parameters	Type	Description
value	Union[int, str, list, tuple, None]	Default value in DateTimePicker
readonly	bool	Allows to set read only mode
disabled	bool	Allows to disable DateTimePicker
editable	bool	Allows to edit input
clearable	bool	Shows clear button
size	Literal["large", "small", "mini", None]	Size of input field
placeholder	str	DateTimePicker placeholder
w_type	Literal["year", "month", "date", "datetime", "week", "datetimerange", "daterange"]	DateTimePicker picker type
format	Literal["yyyy", "MM", "dd", "HH", "mm", "ss"]	Datetime displaying format
widget_id	str	ID of the widget

value

Determine DateTimePicker default value.

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

default value: None

datetime_picker = DateTimePicker(value="2023-03-22 14:01:02")

placeholder

Determine DateTimePicker placeholder.

type: str

default value: "Select date and time"

datetime_picker = DateTimePicker(placeholder="Select")

size

Determine DateTimePicker size of the input.

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

default value: None

datetime_picker = DateTimePicker()
datetime_picker_mini = DateTimePicker(size="mini")
datetime_picker_small = DateTimePicker(size="small")
datetime_picker_large = DateTimePicker(size="large")

w_type

Determine DateTimePicker picker type.

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

default value: "datetime"

datetime_picker = DateTimePicker(w_type="datetimerange")

format

Determine DateTimePicker displaying format.

type: Literal["yyyy", "MM", "dd", "HH", "mm", "ss"]

default value: "yyyy-MM-dd HH:mm:ss"

datetime_picker = DateTimePicker(format="yyyy/MM/dd HH:mm")

readonly

Determine whether DateTimePicker is read-only.

type: bool

default value: False

datetime_picker = DateTimePicker(value="2023-03-22 14:01:02", readonly=True)

disabled

Determine whether DateTimePicker is disabled.

type: bool

default value: False

datetime_picker = DateTimePicker(disabled=True)

editable

Determine whether the input is editable.

type: bool

default value: False

clearable

Determine whether to show a clear button.

type: bool

default value: True

widget_id

The ID of the widget

type: str

default value: None

Methods and attributes

Attributes and Methods	Description
get_value()	Return DateTimePicker current value.
set_value(value: Union[int, str, datetime, list, tuple])	Set DateTimePicker value.
@value_changed	Decorator function to handle DateTimePicker click.

Mini App Example

You can find this example in our GitHub repository:

supervisely-ecosystem/ui-widgets-demos/input/006_datetime_picker/src/main.py

Import libraries

import os
from datetime import datetime, timezone
import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Card, Container, Text, DateTimePicker

Init API client

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

load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))
api = sly.Api()

Initialize DateTimePicker and Text widgets

datetime_picker = DateTimePicker()
text = Text()

Create app layout

Prepare a layout for an app using Card widget with the content parameter.

card = Card(
    "Date and Time Picker",
    content=Container([datetime_picker, text]),
)
layout = Container(widgets=[card])

Create an app using a layout

Create an app object with a layout parameter.

app = sly.Application(layout=card)

Add functions to control widgets from Python code

@datetime_picker.value_changed
def set_only_date_from_today(datetime_value):
    if datetime_value is not None:
        format_string = "%Y-%m-%dT%H:%M:%S.%fZ"
        selected = datetime.strptime(datetime_value, format_string).replace(tzinfo=timezone.utc)
        current_day = datetime.combine(datetime.now().date(), datetime.min.time()).replace(
            tzinfo=timezone.utc
        )
        if selected < current_day:
            new_value = datetime.utcnow().replace(tzinfo=timezone.utc)
            iso_value = new_value.strftime("%Y-%m-%dT%H:%M:%S.%f")[:-3] + "Z"
            datetime_picker.set_value(iso_value)

    info = f"Selected date and time: {datetime_value}"
    text.set(text=info, status="info")