mirror of
https://github.com/GeorgeSG/lovelace-time-picker-card.git
synced 2026-11-03 11:48:45 +00:00
Bram KragtenandClaude Opus 5
7fc93eecea
formatEntityName returns any string it is given verbatim, the empty one included, so `name: ''` blanked the label where it previously fell through to the friendly name. It now reaches the formatter as undefined. Also drops `parent_device` from the accepted name parts. It only landed in the frontend on 2026-09-10 and is in no release yet, so under the 2026.4 gate it was silently ignored. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
208 lines
12 KiB
Markdown
208 lines
12 KiB
Markdown
# Time Picker Card
|
|
|
|
[![HACS][hacs-shield]][hacs-link]
|
|
[![Downloads][downloads-shield]][downloads-link]
|
|
[![GitHub Release][releases-shield]][releases-link]
|
|
[![CI][ci-shield]][ci-link]
|
|
[![Project Maintenance][maintenance-shield]][maintenance-link]
|
|
[![License][license-shield]][license-link]
|
|
|
|
## Overview
|
|
|
|
This is a Time Picker Card for [Home Assistant](https://www.home-assistant.io/)'s [Lovelace UI](https://www.home-assistant.io/lovelace).
|
|
|
|
Requires an [Input Datetime](https://www.home-assistant.io/integrations/input_datetime/) that has time (`has_time: true`).
|
|
|
|
## Installation
|
|
|
|
### HACS
|
|
|
|
Install using [HACS](https://hacs.xyz) and add the following to your config:
|
|
|
|
```yaml
|
|
resources:
|
|
- url: /hacsfiles/lovelace-time-picker-card/time-picker-card.js
|
|
type: module
|
|
```
|
|
|
|
### Manual
|
|
|
|
Download time-picker-card.js from the [latest realease](https://github.com/GeorgeSG/lovelace-time-picker-card/releases/latest) and place it in your `config/www` folder. Add the following to your config:
|
|
|
|
```yaml
|
|
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
|
|
|
|
|
|
|
|
```yaml
|
|
type: 'custom:time-picker-card'
|
|
entity: input_datetime.alarm_time
|
|
```
|
|
|
|
### Custom config - hidden card name, 12 hour mode
|
|
|
|
|
|
|
|
```yaml
|
|
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
|
|
|
|
|
|
|
|
```yaml
|
|
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
|
|
|
|
|
|
|
|
```yaml
|
|
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](https://www.home-assistant.io/integrations/input_datetime/) entity with `has_time: true` | |
|
|
| name | string / list | **Optional** | Card name. Accepts a [structured name](#structured-names) on Home Assistant 2026.4 and later. | Entity's 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` |
|
|
| second_step | number | **Optional** | Second change when clicking arrows (only with `hide.seconds: false`) | `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` |
|
|
|
|
### Structured names
|
|
|
|
_Requires Home Assistant 2026.4 or later. On earlier versions a structured `name` falls back to the entity's friendly name._
|
|
|
|
Home Assistant composes an entity's display name out of its registry context
|
|
(entity, device, area, floor) rather than one `friendly_name` string. `name` can
|
|
be a list of those parts instead of a plain string, so it keeps following renames
|
|
and matches what the built-in cards show:
|
|
|
|
```yaml
|
|
type: custom:time-picker-card
|
|
entity: input_datetime.alarm
|
|
name:
|
|
- type: area
|
|
- type: entity
|
|
```
|
|
|
|
Available part types are `entity`, `device`, `area`, `floor`, and
|
|
`text` (a literal, written as `{type: text, text: 'Alarm'}`). Parts that resolve to
|
|
nothing are dropped. A plain string `name` keeps working exactly as before, and the
|
|
visual editor offers both modes on Home Assistant 2025.11 and later.
|
|
|
|
See the [Home Assistant developer documentation](https://developers.home-assistant.io/docs/frontend/data#hassformatentitynamestateobj-name-options) for details.
|
|
|
|
## Meta
|
|
|
|
**Georgi Gardev**
|
|
|
|
- [gar.dev](https://gar.dev)
|
|
- [![GitHub][github-icon]][github-link] [GeorgeSG][github-link]
|
|
- [![Twitter][twitter-icon]][twitter-link] [@georgesg92][twitter-link]
|
|
|
|
[hacs-shield]: https://img.shields.io/badge/HACS-Default-brightgreen.svg
|
|
[hacs-link]: https://github.com/hacs/integration
|
|
[downloads-shield]: https://img.shields.io/github/downloads/GeorgeSG/lovelace-time-picker-card/latest/total?color=brightgreen&logo=github
|
|
[downloads-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/releases
|
|
[releases-shield]: https://img.shields.io/github/release/GeorgeSG/lovelace-time-picker-card.svg
|
|
[releases-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/releases
|
|
[ci-shield]: https://img.shields.io/github/actions/workflow/status/GeorgeSG/lovelace-time-picker-card/ci.yaml?branch=master&label=CI&logo=github
|
|
[ci-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/actions?query=workflow%3ACI
|
|
[maintenance-shield]: https://img.shields.io/maintenance/yes/2026.svg
|
|
[maintenance-link]: https://github.com/GeorgeSG/lovelace-time-picker-card
|
|
[license-shield]: https://img.shields.io/github/license/GeorgeSG/lovelace-time-picker-card?color=brightgreen
|
|
[license-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/blob/master/LICENSE
|
|
[github-icon]: http://i.imgur.com/9I6NRUm.png
|
|
[github-link]: https://github.com/GeorgeSG/
|
|
[twitter-icon]: http://i.imgur.com/wWzX9uB.png
|
|
[twitter-link]: https://twitter.com/georgesg92
|