Skip to content

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
date(★) datetime
dynamic

The date that this control represents and can modify.
It is typically bound to a datetime object.

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.
The parameters of that function are all optional:

  • state (State): the state instance.
  • var_name (str): the variable name.
  • value (any): the new value.

propagate bool App config

Allows the control's main value to be automatically propagated.
The default value is defined at the application configuration level.
If True, any change to the control's value is immediately reflected in the bound application variable.

active bool
dynamic
True

Indicates if this component is active.
An inactive component allows no user interaction.

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.
These class names will be added to the default taipy-<element_type>.

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:

A date selector

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:

A date and time selector

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:

A read-only date selector

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:

A formatted date