Lovelace: Datetime Picker Card

Share your Projects! Dashboards & Frontend
, ,
1

Lovelace: Datetime Picker Card

Hi everyone! :waving_hand:

I created a custom Lovelace card: lovelace-datetime-picker-card. It provides a clean, user-friendly interface to set date and time values for your Home Assistant entities directly from your dashboard.

GitHub Release

:camera: Preview

UI Configuration

datetime-card-configuration-in-visual-editor

Date, Time & DateTime Selection

datetime-card-in-action

:sparkles: Features

  • Easy date and time picker interface for input_datetime entities.
  • Clean integration with default Home Assistant themes and dark mode.
  • Compact layout suitable for both desktop and mobile viewports.

:package: Installation

Via HACS (Custom Repository)

Since default HACS inclusion is pending, you can add it as a custom repository:

  1. Open HACS in your Home Assistant UI.
  2. Click the 3 dots in the top right corner and select Custom repositories.
  3. Repository: https://github.com/akhtar-waseem/lovelace-datetime-picker-card
  4. Category: Dashboard
  5. Click Add, then search for “Datetime Picker Card” and install it.

Manual Installation

  1. Download lovelace-datetime-picker-card.js from the Latest Release.
  2. Place the file in your config/www/ folder.
  3. Add the resource in Settings → Dashboards → Resources:
    • URL: /local/lovelace-datetime-picker-card.js
    • Resource Type: JavaScript Module

:gear: Example Configuration

type: custom:datetime-picker-card
entity: input_datetime.example_datetime
name: Set Alarm Time

Hope someone else finds this useful! Please let me know what you think :slight_smile:

For more details and examples, see Github repo Github

:link: Links

1 Like