Can this be used to turn on a switch at a set time ?
If so, any ideas on what the config would look like ?
No. This only used to set the time values of an input_datetime.
You would have to create an input_datetime to control your switch. But then you could use this card to select the time instead of using the normal UI interface for selecting it.
hello ThaNerd
can you please post your yaml configuration?
thank you
I’ll need to create a new thread for my setup…
Hi and thanks for the card !
I would like to reduce margin/padding of ‘time-picker-card’.
I try to enter in shadow-root but i can’t do it.
this code :
style: |
ha-card{
background-color: rgba(0,0,0,0);
}
.time-picker-content{
background-color: red;
}
time-unit{
background-color: blue;
}
give me : 
But when i want to enter in shadow-root :
I have this :
style: |
time-unit:
$: |
.time-unit {
background: red;
background-color: green;
}
Have you an idea ?
Thanks
Hi, i have a problem not with the card but the integration in button-card.
This is the first time I have encountered this problem and I don’t know what to do.
This is the basic integration on button-card :
type: 'custom:button-card'
aspect_ratio: 1/1
custom_fields:
graph:
card:
entity: input_datetime.heating_time_confort_morning_end
hide:
name: true
hour_step: 1
layout:
align_controls: center
name: inside
link_values: true
minute_step: 5
name: ''
type: 'custom:time-picker-card'
styles:
custom_fields:
graph:
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"i" "n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
entity: input_select.chauffage_salon
hold_action:
action: more-info
When i use the integration mode in button card, the click on up/down works on PC but not work in mobile and android app…
Any idea why with this card ? No problem when i use light_card for example.
I love this time-picker-card and i really want to use it in button card…
Help please 
Just got this card working! Love it 
I’m trying to get multiple selectors to show up in a small area. Tried the vertical-stack card, and it looks like:
Lots of space between them. Wondering if there’s a cleaner way to stack multiples.
Second question, is there a way to use auto-entities card with this?
Hi there,
Context: I included the time picker card within a stack-in-card, which is within a swipe-card, which is within a picture-elements card.
Problem: The values of the input_datetime.XX are not updating in lovelace frontend. When investigating the entity, it gets changed. So, only the frontend seems to not get the update.
Any clue how I can fix this or what I am doing wrong?
cards:
- type: custom:stack-in-card
styles:
card:
- --keep-background: 'true'
cards:
- type: 'custom:time-picker-card'
entity: input_datetime.kitchen_on_time
name: Kitchen On
minute_step: 1
layout:
name: inside
align_controls: right
style: |
ha-card {
margin: -2em -2em -2em -2em;
padding: -10;
box-shadow: none;
}
Bonus problems : Is it possible to make the background transparent / remove background?
Thanks!
Best,
Norbert
Hi there,
Is there a way to show seconds ? If not, it could be a great addition : I use it a lot to configure inpuot_DateTimer for timer purpose. Something having seconds is mandatory
Hi all, apologies to everyone that I haven’t responded to! I’ve been away from the Home Assistant stuff for a while, but I’m slowly finding more time and energy to work on this stuff, so I should be more active
@Norbsen, that’s a very custom setup I’ll try to replicate it, but can’t promise a fix. It could be due to something in any of the parent cards you’re using. On the bonus problem - there is no default option to make the background transparent, but it can be done with custom styling. You can find examples of custom styling in this thread.
@cseyler, currently the card does not support seconds, but that’s a good point. I never needed them, so I never added support for them, but I see how it could be handy. I’ll look into it!
Thanks for the reply. I now figured that the main problem was indeed in the custom template card, which didn’t update any page unless specified in the card. So, no need to replicate!
Just released Time Picker Card version 1.1.0!
Adds:
- Seconds support (disabled by default). Thanks @cseyler for the suggestion.
- Embedded style option.
Take a look and let me know what you think!
2 Likes
Thanks for your job ! great card !
1 Like
Just a little bug : in the visual editor, enabling second also enable the title: both swithes seem linked together
Good catch, thanks! Fixed in 1.1.1.
Hello, could you please share some info how to create such card for irrigation?
I mean specially this part with picking the day of the week.
I will appreciate some hints.
BR
Greg
Could it have two step values, one for tap_action and one for hold_action?
Also, hiding hours can be useful when they aren’t needed.
Thanks for your consideration… and this awesome card.
hi at all! i’m using this card and it’s awesome!!!
i’ve an input_boolean to start my switch schedule now…
how can i add an “if statement” to change the color (from white to green) of “time-input” when my input_boolean is on??
Something similar to:
{% if states(input_boolean.start_b) == 'on' %}
blue
{% else %}
red
{% endif %}
;
thanks a lot
this is my code:
type: horizontal-stack
cards:
- type: 'custom:time-picker-card'
entity: input_datetime.start_boiler
hour_step: 1
link_values: true
minute_step: 5
second_step: 5
name: ''
layout:
embedded: true
name: header
align_controls: center
hour_mode: 24
hide:
name: true
style:
.: |
ha-card {
box-shadow: none;
}
.time-picker-row:
.time-picker-content:
.: |
.time-separator {
}
time-unit:
$: |
.time-unit {
}
.time-input {
border: 2px solid #fff !important;
background-color: transparent !important;
color: #fff !important;
border-radius: 5px;
pointer-events: none !important;
.time-picker-icon {
color: #fff !important;
}
- type: 'custom:time-picker-card'
entity: input_datetime.setta_fine_boiler
hour_step: 1
link_values: true
minute_step: 5
second_step: 5
name: ''
layout:
embedded: true
align_controls: center
name: header
hour_mode: 24
hide:
name: true
seconds: true
style:
.: |
ha-card {
box-shadow: none;
}
.time-picker-row:
.time-picker-content:
.: |
.time-separator {
}
time-unit:
$: |
.time-unit {
}
.time-input {
border: 2px solid #fff !important;
background-color: transparent !important;
color: #fff !important;
border-radius: 5px;
pointer-events: none !important;
}
.time-picker-icon {
color: #fff !important;
}
Awesome card. How about adding an option to hide the entity icon?
1 Like