Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/GeorgeSG/lovelace-time-picker-card

🕰️ Time Picker Card for Home Assistant's Lovelace UI
https://github.com/GeorgeSG/lovelace-time-picker-card
home-assistant homeassistant lovelace lovelace-card lovelace-custom-card
Last synced: 8 days ago
JSON representation
🕰️ Time Picker Card for Home Assistant's Lovelace UI
Host: GitHub
URL: https://github.com/GeorgeSG/lovelace-time-picker-card
Owner: GeorgeSG
License: mit
Created: 2020-05-04T18:21:48.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-07-18T22:02:59.000Z (over 1 year ago)
Last Synced: 2024-08-02T16:12:27.221Z (3 months ago)
Topics: home-assistant, homeassistant, lovelace, lovelace-card, lovelace-custom-card
Language: TypeScript
Homepage:
Size: 910 KB
Stars: 206
Watchers: 10
Forks: 13
Open Issues: 11
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        # 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.

![Visual Editor](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/visual_editor.png)

## Examples

### Default config - card name shown, 24 hour mode

![Default theme with card name](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/default_with_name.png)

```yaml

type: 'custom:time-picker-card'

entity: input_datetime.alarm_time

```

### Custom config - hidden card name, 12 hour mode

![Default theme with no card name](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/default_without_name.png)

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

![Default theme with single hour mode](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/single_hour_mode.png)

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

![Default theme with single hour mode](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/name_inside.png)

```yaml

type: 'custom:time-picker-card'

entity: input_datetime.alarm_time

layout:

  name: inside

  align_controls: center

```

### Dark theme, embedded layout

![Dark theme embedded](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/dark_embedded.png)

### Dark theme, thin layout

![Dark theme thin layout](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/dark_thin.png)

### With a custom lovelace theme

![Custom theme](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/custom.png)

## 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       | **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` |

## 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/workflow/status/GeorgeSG/lovelace-time-picker-card/CI?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/2022.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