This date time card for home assistant is easy to configure and bring you rich features on the same time
JavaScriptMIT
Simple Date Time Clock Card for HomeAssistant
Description
This card for home assistant is easy to configure and bring you rich features on the same time. Also for that reason you can find all properties to configure, an explanation of them and samples below.
Currently there are 29 or more properties. But don't worry, you don't need to set any of them to get a good result (See sample No special config).
Properties
Global
Name
Type
Default
Description
global_text_align
string
center
Could be center, left or right. The alignment of the text
global_padding_left_size
string
0px
Inner space to the left. Unit is up to you
global_padding_right_size
string
0px
Inner space to the right. Unit is up to you
global_padding_top_size
string
15px
Inner space to the top. Unit is up to you
global_padding_bottom_size
string
15px
Inner space to the bottom. Unit is up to you
global_update_interval_ms
int
1000
Interval for updating the clock. Could be set higher to save power or if you doesn't display the seconds anyway.
Time
Name
Type
Default
Description
time_show
bool
true
Sets the visibility of the time
time_font_size
string
5em
Size of the text of the time. Unit is up to you
time_separator_char
string
:
Sets the char that is displayed between the hours and minutes or minutes and seconds
time_separator_blink
bool
false
Let the time_separator_char blink each second. Could also be usefull if seconds aren't displayed
time_hours_24
bool
true
Enables or disables the clock in 24h style. Else it would be 12h with AM/PM
time_hours_lead_zero
bool
true
Forces the value to two digits: 9 -> 09
time_minutes_lead_zero
bool
true
Forces the value to two digits: 9 -> 09
time_seconds_font_size
string
2em
Size of the text of the seconds. If undefined the value is the same than time_font_size. Unit is up to you
time_seconds_show
bool
true
Sets the visibility of the seconds
time_seconds_lead_zero
bool
true
Forces the value to two digits: 9 -> 09
time_seconds_visibility_percentage
string
100%
Can dim the text of the seconds to more match the background
Date
Name
Type
Default
Description
date_show
bool
true
Sets the visibility of the date
date_locale
string
en-US
The locale is used to translate the name of the week. See date_week_day_name_show
date_separator_char
string
.
Sets the char that is displayed between the day and the month or the month and the year
date_font_size
string
2em
Size of the text of the date. Unit is up to you
date_us_format
bool
false
Sets the date format to us(MM.DD.YYYY) insteat the eu/default(DD.MM.YYYY) format
date_days_lead_zero
bool
true
Forces the value to two digits: 9 -> 09
date_week_day_name_show
bool
true
Sets the visibility of the name of the week.
date_week_day_name_long
bool
false
Sets the length of the name of the week. Fri <=> Friday
date_week_number_show
bool
false
Sets the visibility of the week number of the year
date_week_number_label
string
KW
Sets the label that is shown before the number of the week. Could also be empty