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
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
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, TextInit 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
DatePicker widgetsdaterange_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
Button, Text widgets we will use in UI for demotext = 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])
Last updated
Was this helpful?