date
A control that can display and specify a formatted date, with or without time.
Warning on Windows
When you are using dates earlier than January 1st, 1970 (the UNIX epoch) in a date control on a
Windows system, you may receive a warning in the console where the script was run, indicating a
raised exception in datetime.astimezone()
.
This is a known problem in the Python implementation, referenced in the
Python issue tracker, that Taipy has no workaround for.
Properties¶
Name | Type | Default | Description |
---|---|---|---|
(★) |
datetime dynamic |
The date that this control represents and can modify. |
|
with_time |
bool |
False | Whether or not to show the time part of the date. |
format |
str |
The format to apply to the value. See below. |
|
editable |
bool dynamic |
True | Shows the date as a formatted string if not editable. |
label |
str |
The label associated with the input. |
|
on_change |
Callback |
The name of a function that is triggered when the value is updated.
|
|
propagate |
bool |
App config | Allows the control's main value to be automatically propagated. |
active |
bool dynamic |
True | Indicates if this component is active. |
id |
str |
The identifier that will be assigned to the rendered HTML component. |
|
properties |
dict[str, any] |
Bound to a dictionary that contains additional properties for this element. |
|
class_name |
str dynamic |
The list of CSS class names that will be associated with the generated HTML Element. |
|
hover_text |
str dynamic |
The information that is displayed when the user hovers over this element. |
(★)date
is the default property for this visual element.
Details¶
The format property lets you indicate how to display the date object set to the
date property. Note that the format is used only when editable is set
to False (the date control is read-only).
This property can be set to a format string that is consumed by the
date-fns.format() function. The documentation for this
function provides all the different format strings you might need.
For more information, you can look at the formatting example below.
Styling¶
All the date controls are generated with the "taipy-date" CSS class. You can use this class name to select the date selectors on your page and apply style.
Stylekit support¶
The Stylekit provides a specific class that you can use to style date selectors:
- fullwidth
If a date selector uses the fullwidth class, then it uses the whole available horizontal space.
Usage¶
Using only the date¶
Assuming a variable date contains a Python datetime
object:
import datetime
date = datetime.datetime(1789, 7, 14, 17, 5, 12)
You can create a date selector that represents it with the following definition:
Definition
<|{date}|date|>
<taipy:date>{date}</taipy:date>
import taipy.gui.builder as tgb
...
tgb.date("{date}")
The resulting control appears on the page similarly to:
Note that because the with_time property is set to False by default, only the date part of the date object is displayed.
Using the full date and time¶
If you do need to use the time, you can set the with_time property to True.
Keeping the definition of the date object from the example above, we can change the definition
of the control to:
Definition
<|{date}|date|with_time|>
<taipy:date with_time>{date}</taipy:date>
import taipy.gui.builder as tgb
...
tgb.date("{date}", with_time=True)
Then the date selector shows like this:
Formatting the date¶
To format the date on the page, you must set the editable property to False.
Here is a definition of a read-only date selector control using the same date variable definition
as above:
Definition
<|{date}|date|not editable|>
<taipy:date editable="false">{date}</taipy:date>
import taipy.gui.builder as tgb
...
tgb.date("{date}", editable=False)
Here is how the control is displayed:
When not editable, the date
control looks just like a text
control showing the
date object.
You can, however, control how to display that object by setting the format property
to a formatting string as documented in the date-fns.format()
function.
Here is the definition of the date
control where the format property is set. Note
that, according to the date-fns.format() documentation:
- "eeee" is replaced by the name of the day of the week
- "LLLL" is replaced by the name of the month
- "do" is replaced by the day of the month (including st, nd, and so forth)
- "y" is replaced by the year
Definition
<|{date}|date|not editable|format=eeee LLLL do, y|>
<taipy:date editable="false" format="eeee LLLL do, y">{date}</taipy:date>
import taipy.gui.builder as tgb
...
tgb.date("{date}", editable=False, format="eeee LLLL do, y")
The formatted date appears in the control: