Lovelace: Time Picker Card

Share your Projects! Dashboards & Frontend
21

Yup, I think both approaches are valid and it’s a matter of preference.

For example, mini-media-player and banner-card use theme variables, and button-card and mini-graph-card use your approach with custom config in the card. And custom-header uses both :smiley:

The drawback of your approach is that if you want to change the card everywhere you use it, you have to either use some kind of template, or copy-paste the config everywhere.

The drawback of mine is it’s a bit harder to change it in a single place. If you have card-mod installed, you can set the variables in the card config like this:

type: custom:time-picker-card
entity: input_datetime.alarm_time
style: |
  :host {
    --time-picker-icon-color: red
  }
2 Likes
22

Yeah, I agree.

It would probably be helpful (since I now know there is more than one way… :slightly_smiling_face:) for you to give a summary of how to do that in the docs for your card.

Kind of like you did for me here. :wink:

I’ve been a HA user for several years and didn’t know about that so I’m sure new users would have no idea what you are talking about or how to do it.

Good card, BTW. I’m sure I’ll find a use for it. I’ve already got it installed and playing around with it a bit.

1 Like
23

Is there anyway to increase the size of the card? Mine isn’t that large on screen, and it would be good to make use of more of the width.

24

Currently the card behaves like a default lovelace card - it’ll take as much space horizontally as it can (within the column), and fixed space vertically.

Do you want to increase the amount of space the card takes or the size of the buttons/inputs in the card?

25

Mine doesnt take up all of the width.

date_time_picker
date_time_picker507×581 21.5 KB

It’s arrange inside a custom:stack-in-card set to vertical.

1 Like
26

I think what’s happening here is the card is expanding, but you’re not seeing it, because stack-in-card hides the box-shadow.

What’s happening is something similar to this.

How would you expect the card to look in this case?

27

Ah OK, yeah I did hide the box shadow so you’re probably right. Would be good to make it a bit wider though.

28

Just released version 0.1.0!

Some changes since my initial post:

To see all options go to the Github repo or try the visual editor :slight_smile:

1 Like
29

I really don’t understand why it has taken this long for something this simple to arrive but I am very happy. It’s simple but does what it needs to do. Great work!

1 Like
30

This is great. I’ve already included it in my Irrigation System!

Thanks!

1 Like
31

One suggestion if I may…

Can you make it so that the name can be configurable rather than it being fixed as the name defined by the input.date_time?

32

It is! :slight_smile: Set the name property:

- type: custom:time-picker-card
  entity: input_datetime.alarm_time
  name: Your custom name
33

Sorry. No idea how I missed that…

34

is it just me?

If I change the input_datetime in the “normal” way, the state will be restored after reboot.
But, if I change the state via this plugin, the state will NOT be restored after reboot. This is very curious.

By the way: it looks pretty good :wink:

35

I can’t reproduce this :confused:

Some things I suggest checking:

  1. Are you by any chance trying to change the value of an input_datetime that has an initial value?
  2. Are you seeing any errors in Home Assistant’s log after changing the time from Time Picker card? Or any errors in the browser console?
  3. Does the old value still persist if you reload your browser tab after rebooting Home Assistant?
  4. Another way you can try to “debug” this is to add an entities card right below Time Picker card to see if it updates:
- type: custom:time-picker-card
  entity: input_datetime.your_input
- type: entities
  entities:
    - input_datetime.your_input

The value in both cards should change immediately after you change it (no matter which card you change it from). The value in both cards should be the same after a Home Assistant reboot.

36

thank you for your fast feedback :slight_smile:

It isery irritating.
maybe I was going too fast:

  • if I change values and restart within ~ 10minutes -> it falls back to 0:00 (or old values)
  • if I change values and restart after ~ 10minutes -> it works

By the way:

  • no initial value used
  • no errors
  • point 4 was my first attempt and works like a charm (in both directions) -> so, I think it is just a matter of time between value-change and reboot (which makes no sense from point view :upside_down_face:)
37

Sorry, I’ve ran out of ideas ¯\(ツ)/¯.

If someone else has this problem, or if someone has an idea how to debug it - chime in :slight_smile:

38

I am just “not allowed” to change the value with an instant restart.
it’s not a big problem for me :wink:

39

When I have picked a time fx. 18:10 and use it in an automation for turning on my lamp, will it turn on everyday at 18:10 ? or only once ?

40

That depends on how you have your automation configured. It has nothing to do with this card.

It’s just a different way to set an input_datetime.