GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → GeorgeSG → Lovelace Time Picker Card

GeorgeSG / Lovelace Time Picker Card

Licence: mit
🕰️ Time Picker Card for Home Assistant's Lovelace UI

Programming Languages

typescript
32286 projects

Labels

home-assistanthomeassistant

Projects that are alternatives of or similar to Lovelace Time Picker Card

Addon Spotify Connect
Spotify Connect - Home Assistant Community Add-ons
Stars: ✭ 60 (-4.76%)
Mutual labels:  home-assistant, homeassistant
Addon Zwave2mqtt
Z-Wave to MQTT - Home Assistant Community Add-ons
Stars: ✭ 58 (-7.94%)
Mutual labels:  home-assistant, homeassistant
Ble monitor
Xiaomi Mijia BLE MiBeacon monitor
Stars: ✭ 611 (+869.84%)
Mutual labels:  home-assistant, homeassistant
Home Assistantconfig
🏠 Home Assistant configuration & Documentation for my Smart House. Write-ups, videos, part lists, and links throughout. Be sure to ⭐ it. Updated FREQUENTLY!
Stars: ✭ 3,687 (+5752.38%)
Mutual labels:  home-assistant, homeassistant
Esphome Config
My ESPHome configuration files for my ESP8266 / ESP32 plugs and boards for use with Home Assistant.
Stars: ✭ 53 (-15.87%)
Mutual labels:  home-assistant, homeassistant
Homeassistant
Home Assistant Configuration Files and Documentation
Stars: ✭ 395 (+526.98%)
Mutual labels:  home-assistant, homeassistant
Homeassistant
Example Home Assistant Configs
Stars: ✭ 846 (+1242.86%)
Mutual labels:  home-assistant, homeassistant
Awesome Home Assistant
A curated list of amazingly awesome Home Assistant resources.
Stars: ✭ 3,487 (+5434.92%)
Mutual labels:  home-assistant, homeassistant
Repository Edge
EDGE - Home Assistant Community Add-ons
Stars: ✭ 42 (-33.33%)
Mutual labels:  home-assistant, homeassistant
Yahoofinance
Home Assistant component which allows you to get stock updates from Yahoo finance.
Stars: ✭ 28 (-55.56%)
Mutual labels:  home-assistant, homeassistant
Home Assistant Config
🏠 My Home Assistant configuration, a bit different that others :) Be sure to 🌟 this repository for updates!
Stars: ✭ 1,050 (+1566.67%)
Mutual labels:  home-assistant, homeassistant
Addon Adb
Android Debug Bridge - Home Assistant Community Add-ons
Stars: ✭ 58 (-7.94%)
Mutual labels:  home-assistant, homeassistant
Vacuum Card
Vacuum cleaner card for Home Assistant Lovelace UI
Stars: ✭ 295 (+368.25%)
Mutual labels:  home-assistant, homeassistant
Repository
Home Assistant Community Add-ons
Stars: ✭ 520 (+725.4%)
Mutual labels:  home-assistant, homeassistant
Unifiprotect
Control and monitor your Unifi Protect Cameras from Home Assistant
Stars: ✭ 279 (+342.86%)
Mutual labels:  home-assistant, homeassistant
Replaylightshistory
AppDaemon App for Home Assistant to replay light switch history when no one is home.
Stars: ✭ 17 (-73.02%)
Mutual labels:  home-assistant, homeassistant
addon-mopidy
Mopidy - Home Assistant Community Add-ons
Stars: ✭ 42 (-33.33%)
Mutual labels:  home-assistant, homeassistant
Home assistant
My personal Home Assistant setup - Running on a HassOS VM.
Stars: ✭ 270 (+328.57%)
Mutual labels:  home-assistant, homeassistant
Smarthome
SmartHome: firmware per ESP8266 - Casa domotica
Stars: ✭ 28 (-55.56%)
Mutual labels:  home-assistant, homeassistant
Addon Ide
IDE - Home Assistant Community Add-ons
Stars: ✭ 61 (-3.17%)
Mutual labels:  home-assistant, homeassistant
View All Similar Projects ➔

Time Picker Card

HACS Downloads GitHub Release CI Project Maintenance License

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.

Visual Editor

Examples

Default config - card name shown, 24 hour mode

Default theme with card name

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

Custom config - hidden card name, 12 hour mode

Default theme with no card name

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

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

Custom config - card name inside card and controls aligned right

Default theme with single hour mode

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

With a custom lovelace theme

Custom 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
layout object Optional Card Layout configuration none
hide object Optional Hide object none

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

Hide Object

Name Type Requirement Description Default
name boolean Optional Hides the card name 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

Meta

Georgi Gardev

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].