Time Picker Card by @georgesg

Overview

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

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

Screenshots

Installation

Install using HACS or follow this guide

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

Usage

type: 'custom:time-picker-card'
entity: input_datetime.alarm_time
name: 'Choose a time'
hour_mode: 24
hour_step: 1
minute_step: 5
hide:
  name: false

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
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
hide	object	Optional	Hide object	none

Hide Object

Name	Type	Requirement	Description	Default
name	boolean	Optional	Hides the card name	false

Theme Variables

Name	Default	Description
--tpc-elements-background-color	var(--dark-primary-color)	Background color for header and ui elements
--tpc-icon-color	var(--primary-text-color)	Arrow color
--tpc-text-color	white	Text color
--tpc-accent-color	var(--accent-color)	AM / PM active color

Meta

Georgi Gardev

• gar.dev
• GeorgeSG
• @georgesg92