Time Picker Card

Overview

This is a Time Picker Card for Home Assistant's Lovelace UI.

Requires an Input Datetime that has time (has_time: true).

Installation

HACS

Install using HACS and add the following to your config:

resources:
  - url: /hacsfiles/lovelace-time-picker-card/time-picker-card.js
    type: module

Manual

Download time-picker-card.js from the latest realease and place it in your config/www folder. Add the following to your config:

resources:
  - url: /local/time-picker-card.js
    type: module

Usage

Visual Editor

Time Picker Card supports Lovelace's Visual Editor. Click the + button to add a card and search for time picker.

Examples

Default config - card name shown, 24 hour mode

type: 'custom:time-picker-card'
entity: input_datetime.alarm_time

Custom config - hidden card name, 12 hour mode

type: 'custom:time-picker-card'
entity: input_datetime.alarm_time
hour_mode: 12
hide:
  name: true

Custom config - hidden card name, 12 hour mode with a "single" hour mode picker

type: 'custom:time-picker-card'
entity: input_datetime.alarm_time
hour_mode: 12
layout:
  hour_mode: single
  align_controls: right
hide:
  name: true

Custom config - card name inside card and controls aligned right

type: 'custom:time-picker-card'
entity: input_datetime.alarm_time
layout:
  name: inside
  align_controls: center

Dark theme, embedded layout

Dark theme, thin layout

With a custom lovelace theme

Options

Name	Type	Requirement	Description	Default
type	string	Required	`custom:time-picker-card`
entity	string	Required	Input Datetime entity with `has_time: true`
name	string	Optional	Card name	Entity's `friendly_name`
link_values	boolean	Optional	If enabled, will change hour when minutes overflow. E.g. will go from 11:55 to 12:00, instead of 11:00	`false`
hour_mode	`12` or `24`	Optional	Hour format. If `12`, card will show AM/PM picker	`24`
hour_step	number	Optional	Hour change when clicking arrows	`1`
minute_step	number	Optional	Minute change when clicking arrows	`5`
delay	number	Optional	Delay in ms before updating entity	`0`
layout	object	Optional	Card Layout configuration	`none`
hide	object	Optional	Hide object	`none`
tap_action	action	Optional	Home assistant action to perform on tap	`more-info`
double_tap_action	action	Optional	Home assistant action to perform on tap	`more-info`
hold_action	action	Optional	Home assistant action to perform on tap	`more-info`

Layout Object

Name	Value	Requirement	Description	Default
hour_mode	`single`, `double`	Optional	Whether to show both AM/PM or just the current mode. In `single` mode, tap the value to change it.	`double`
align_controls	`left`, `center`, `right`	Optional	Horizontal alignment of the controls	`center`
name	`header`, `inside`	Optional	Whether to show the name as a header or inside the card	`header`
embedded	boolean	Optional	Render with embedded style - disables padding, box shadow, and card header	`false`
thin	boolean	Optional	Render with reduced paddings	`false`

Hide Object

Name	Type	Requirement	Description	Default
name	boolean	Optional	Hides the card name	`false`
icon	boolean	Optional	Hides the card icon (only with controls "inside")	`false`
seconds	boolean	Optional	Hides seconds input	`true`

Theme Variables

Time Picker Card will automatically pick up colors from your lovelace theme, but if you want to customize some of them, you can use the following variables in your theme's config file:

Name	Default	Description
time-picker-elements-background-color	`var(--primary-color)`	Background color for header and inputs
time-picker-icon-color	`var(--primary-text-color)`	Arrow color
time-picker-text-color	`white`	Text color
time-picker-accent-color	`var(--primary-color)`	AM / PM active color
time-picker-off-color	`var(--disabled-text-color)`	AM / PM inactive color
time-picker-border-radius	`var(--ha-card-border-radius)`	Border radius of the card
time-picker-control-padding	`8px`	Padding for interactive elements. Increase for larger hitboxes of the controls. Example: `10px 12px`

u1f35c/lovelace-time-range-card