Hello,

First, Thanks for the work.
I wanted to know how I can do to keep the operation to have the popup "more info dialog" ?

Cordially

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser (tried Strg+F5 several times, and deleted the history)

The problem

The Visual editor crashes when I try to add an action. Please see the attached image -when I click on any of these entries, the popup/window closes. I don't see any error in the browser console. Some times strings are visible next to the icon -sometimes not. I cannot reproduce it.

I installed this addon through HACS. After installing it, I restarted the service and cleared the browser cache. The error occurs in Firefox and Chrome.

Environment

• Time Picker Card 1.4.0
• HACS 1.29.0
• Firefox 108.0.1 / Chrome 108.0.5359.125 (Windows 10)
• Home Assistant 2022.12.7 (Frontend 20221213.1 - latest)

Please correct documentation. The right lines to write in resources.yaml are:

• url: /hacsfiles/lovelace-time-picker-card/time-picker-card.js
  type: module
  not
• url: /local/time-picker-card.js
  type: module
  Congrats for this plugin!!!!!

Hello George;

Great work on the card! I just installed it and love it!

I am trying to make a sensor to filter the data produced by the time-picker-card to shave off the seconds characters from the string to send to an LCD display. I can't seem to add the input_datetime as a sensor on the LCD as it is a string and handles it better as text, but this adds 3 extra characters to my output on the LCD that I really don't need, ":00". I could use the extra character space on the display.

I have been researching time template sensors on Home Assistant, but I am not really trying to do a calculation from current time, I am trying to use the numbers input by your picker. How can I do this???

Firstly.. awesome card !! Makes a great addition to my setup 🥳

Problem

When navigating with the minutes picker, the hour remains fixed.

Is it possible to make this more dynamic ? This will help to improve WAF

Suggested feature / solution

If the current time is 05:00, pressing the minutes down arrow should change to 04:55, rather than 05:55

Additional context

Problem

When using this to set my wake up alarm time it would be nice to have an option to toggle the alarm on and off

Suggested feature / solution

Option to add an input_boolean toggle to the card in order to toggle automations related to the selected time

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

The problem

In the new HA UI, a border is shown when used as embedded.
This should be removed.

Environment

frontend==20221031.0
homeassistant==2022.11.0b5

• time-picker-card release with the issue: Not relevant
• Last working time-picker-card release (if known): Not relevant
• Browser and Operating System: Edge, Windows 10

Problem-relevant configuration

- type: entities
  entities:
    - type: custom:time-picker-card
      entity: input_datetime.shower
      name: Shower time
      hour_mode: 24
      link_values: true
      hide:
        icon: true
      layout:
        name: inside
        align_controls: right
        embedded: true

Javascript errors shown in the web inspector (if applicable):

Not applicable

Workaround, using card-mod

      style: |
        ha-card {
          border: none;
        }

Is it possible to remove this extra frame?

`

• type: entities
  show_header_toggle: false
  entities:
  • entity: switch.teplyi_pol
    state_color: true
  • type: 'custom:time-picker-card'
    entity: input_datetime.input_time_timerwarmfloor
    layout:
    name: inside
    align_controls: right
  • input_datetime.input_time_timerwarmfloor
  • automation.avto_vykl_teplogo_pola_nochiu
    `

Problem

When using layout>name as header the top corners are not rounded like the bottom corners when using a custom theme. When using Layout>name as inside all the corners are rounded like they should be according to the theme.

Suggested feature / solution

Make the header bar reference corner rounding from themes.

Thanks for making an EPIC card!!

It is not included in the HACS repository - why?

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

The problem

When selecting Embedded from layout menu, card blends in with HA background;
TPC doesn't pick up correct card background color.

Environment

TPC v: 1.4.0
HA OS: 10.3
HA Core: 2023.6.3

• time-picker-card release with the issue: 1.4.0
• Last working time-picker-card release (if known):
• Browser and Operating System: Chrome/MacOS

Problem-relevant configuration

type: custom:time-picker-card
entity: input_datetime.next_sunset
hour_mode: 24
hour_step: 1
minute_step: 5
layout:
  hour_mode: double
  align_controls: right
  name: header
  embedded: true
hide:
  seconds: true

Javascript errors shown in the web inspector (if applicable):

Hi
Thanks for the nice card !

I'd love to be able to able to have a secondary info/line right below the title showing when the last update was made.

Thanks

Hello,
it seems that the hide icon setting is not working in the companion app ? Impossible to hide it in companion ?
It works well on computer ...
Thanks

Hello, would it be possible to hide name but show icon only?

First of all thank you for the great card!

Problem

Suggested feature / solution

Currently if I have for example 15:24 as a time and minute_step=15 in the config, if I press "ᐱ" button it will change time to 15:39, then to 15:54, 16:09, etc. Instead as an option I'd like to have it first changed to 15:30, then to to 15:45, 16:00, etc. So to have after each interaction minutes without remainder.

Additional context

How can I change the font so it is the same of the theme font ?

This is a beautiful project. I wonder if it'd be difficult to extend to work as a duration picker for timers.

I'd love to see this as a timer interface in lovelace, with the arrows for setting the timer duration and numbers that count down while the timer is active, providing quick access to add minutes or seconds to the running timer.

On the mobile companion app (ios) for home assistant, the numbers for the time picker do now show up, however when the arrows are tapped the time does change.

I'm trying to mod the styles of this card with lovelace-card-mod, but I don't seem to be able to target the time-unit elements.

I have tried adding this to the card in lovelace, but it's not changing the cards CSS:

type: 'custom:time-picker-card'
entity: input_datetime.alarmclock_time
hour_step: 1
minute_step: 5
name: ''
layout:
name: header
align_controls: center
hour_mode: double
hour_mode: 24
link_values: false
hide:
name: false
style: |
ha-card{
border:solid 5px blue !important;
}
.time-unit{
font-weight: 900 !important;
border:solid 5px green !important;
}

Hi, I am not sure how to define time-picker-elements-background-color in the yaml? I have not found an example for this.

Does it go under a theme header and what how is the rgb format specified, eg. 0xFF00FF or something?

Thank you

Problem

Suggested feature / solution

Would be cool to have full control of a datetime entity. The card in it's current state seems to have enough space for a date picker. We would have more precise control of a potential alarm (what this card is mostly used for) and, overall, this card could be the card for the whole datetime entity instead of utilizing only the "set time" functions.

Additional context

Thanks for the card! I really like it a lot.

Problem

When putting the card inside another card, like an entities card, the padding is a bit much:

Suggested feature / solution

It would be nice to be able to have a setting to make the card use less padding and no box shadow to fit in more in the middle of other entities.

Additional context

I have manually edited the CSS to:

• Remove the 16px padding from .time-picker-row
• Set box-shadow: none on <ha-card class="type-custom-time-picker-card">

That makes it look like this:

Which is already a huge improvement imho.

Hi,

I love you card, but can you add a option to select a workday and weekend days, please?

and some example to use it with a automation?, it's possible?

Thanks,

Problem

I am trying to use this as an alarm set on a small tablet near my bed but it is too small to really use. I am looking for ways to increase the box size. I have found ways to adjust the font by putting this in a custom button card but then the numbers run outside the boxes.

Suggested feature / solution

Can there be a setting to adjust the proportions of the elements.

Problem

No problem, other than being impatient and time

Suggested feature / solution

It would be nice to be able to hold the minute chevron down to increase the step value to 2 or 5 and it updates twice a second or something like that

Would like to be able to add multiple controls on the same card.

Checklist:

• [Y] I updated to the latest version available
• [Y] I cleared the cache of my browser

The problem

There is a white border around the edge of the card when using it in a grid.

Environment

Running on Proxmox:

System Health

• time-picker-card release with the issue:
• Last working time-picker-card release (if known):
• Browser and Operating System:

Problem-relevant configuration

Javascript errors shown in the web inspector (if applicable):

All on latest HA and latest card. Doesn't display correctly on mobiles:

Hello,
I'm missing Delay feature, which would be great to avoid unnecessary entity changes. For example, I have to change hour and then minutes, every time I click the entity changes. I'm using also numberbox-card and the feature is there and plays really nice.

This is not a problem.
I wanted to share with you what I did to make it more compact looking when it is embedded.
I know you already did something but I came with a look that is pleasing me using card-mod.
Unfortunately, it is not that easy for me to propose that change myself in the code and would prefer you, if you like it, to include it in a release.

Suggested feature / solution

How it is made using card-mod:

            card_mod:
              style:
                .: |
                  ha-card {
                    margin: -20px -4px -38px 0px;
                  }
                .time-picker-row:
                  .time-picker-content:
                    time-unit:
                      $: |
                        .time-unit {
                          padding: 5px !important;
                        }
                        .time-input {
                          border: 1px solid var(--switch-checked-button-color) !important;
                          height: 5px;
                          background-color: rgba(0,0,0,0) !important;
                          color: var(--primary-text-color) !important;
                          border-radius: 7px;
                          margin: -12px;
                        }     
                        .time-picker-icon {
                          color: var(--switch-checked-button-color) !important;
                        }

I'd like to be able to use the

double_tap_action:
  action: ...

And also, tap_action as well as hold_action when the card is embedded (but not only?) in an entities card like so:

type: entities
entities:
  - type: custom:time-picker-card
    entity: input_datetime.shower
    name: Time to shower, kids
    hour_mode: 24
    link_values: true
    layout:
      name: inside
      align_controls: right
      embedded: true
    double_tap_action:
      action: call-service
      service: automation.trigger
      data:
        entity_id: automation.time_to_shower

This to be able to trigger my linked automation on demand.

Hi, I'm wanting to use embedded: true to reduce the vertical padding between multiple instances of the card however when enabled the left and right padding is also lost making the start of the card misaligned with other cards in the view:

I had a look at the code and tried adding padding values to:

      .time-picker-row.embedded {
        padding: 0px 16px 16px;
      }

but that made no difference. My JS knowledge is very limited but if you could point me to what I need to tweak I'll adjust it myself.

EDIT: looks like it was just my browser cache misbehaving. This change is doing as I wanted.