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.
min	datetime dynamic		The minimum date to accept for this input.
max	datetime dynamic		The maximum date to accept for this input.
width	Union[str,int]	None	The width of the date element.
on_change	Union[str, Callable]		A function or the name of a function that is triggered when the value is updated. This function is invoked with the following parameters: 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 by the propagate configuration option. 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 is 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 are associated with the generated HTML Element. These class names are added to the default taipy-date class name.
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.
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.

Usage

Using only the date

See the entire code for this example

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

MarkdownHTMLPython

<|{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

See the entire code for this example

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

MarkdownHTMLPython

<|{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

See the entire code for this example

Here is a definition of a read-only date selector control using the same date variable definition as above:

Definition

MarkdownHTMLPython

<|{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

MarkdownHTMLPython

<|{date}|date|format=eeee LLLL do, y|>

<taipy:date format="eeee LLLL do, y">{date}</taipy:date>

import taipy.gui.builder as tgb
...
tgb.date("{date}", format="eeee LLLL do, y")

The formatted date appears in the control:

A formatted date

Date constraints

See the entire code for this example

You can set minimum and maximum date boundaries to restrict the user’s date selection.

Assume we define the following date variables:

date = datetime.date(2024, 6, 15)
start = datetime.date(2024, 5, 15)
end = datetime.date(2024, 7, 15)

Here is the control definition that uses these variables:

Definition

MarkdownHTMLPython

<|{date}|date|min={start}|max={end}|>

<taipy:date min="{start}" max="{end}">{date}</taipy:date>

import taipy.gui.builder as tgb
...
tgb.date("{date}", min="{start}", max="{end}")

In this example:

• the main value for the control (the dateproperty) is set to date;
• the min property is set so that no date earlier than start can be selected;
• the max property is set so no date later than end can be selected.

When the user tries to pick a date in July 2024, the control will look like this:

Constrained date choice

Since the maximum date is set to July 15th, all dates after that are grayed out and cannot be selected.

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.

Changing colors

See the entire code for this example

The date control component consists of an input HTML element styled with the "MuiInputBase-input" CSS class, and a popup window (displayed when the calendar icon is pressed) with the "MuiDateCalendar-root" class.

Below is an example of CSS rules that apply custom styling to a date control: css .taipy-date { .MuiInputBase-root { color: green; .MuiIconButton-root { color: green; } } } .MuiDateCalendar-root { color: green; .MuiPickersDay-root { color: green; } }

It's important to note that the rule targeting the "MuiDateCalendar-root" class must stand independently. This is because it styles the calendar popup, which is not directly associated with the element assigned the "taipy-date" class.

These rules change the color of the control's icon and ensures that the same color is applied to the text in the calendar selection popup.

Here is the impact of these CSS rules:

Styling the date control