Great card. I just used as part of a screen to schedule food drop for the cats. Any chance there is some way to reduce the size of the card? I have four of them stacked vertically with a paired input_select field stacked vertically. I’m just looking for someway to make it take up less space. It currently looks like this :
hi at all!
could someone point me to the right direction on how to increase the size of the “hour/minutes pick arrow”??
thanks a lot.
Dear All,
I’m trying to create an automation which starts my pool’s heating system X hours before swimming time.
- Swimming time is set by time picker card
- Pump_start_Hours is defined by a sensor template (based on outdoor temp. and pool temp)
How should I write the condition in the automation? I’m struggling with the calculation as I don’t know how to subtract X hours from the time picker card’s value.
Thank you for your help.
Balint
Swimming time is set by time picker card.
{% set x = states('sensor.pump_start_hours') | int %}
{{ as_datetime(states('input_datetime.swim_time')) - timedelta(hours=x) }}
i would love to explore your add-on, could you please describe how you achieved this, i need to change the days of the week frequently for my irrigation automation6 but how do i add this to the interface, what kind of map is that? Thanks for any help!
1 Like
Fantastic Add-on, thank you for making this!
how did you create the days ?
Hello, can you post your yaml configuration?, I would like to put something like this in my watering can.
Hi all,
I like this card, but I need to configure on-time and off-time for four different lightscenes in the house.
I have some mushroom-chips wihch represents the respective scene. I am thinking about, if it possible to switch the Timepicker card depinding on the chips button selected, so that the on/off times of the different scenes can be configured with only two Time Picker Cards. Is there anyone who has this implemented?
The card should look like the “Rain Auomation”-Card a few posts before, the scenes can be similar to the weekday switches.
Spartacus
Nice card and great looks! Although I have a question:
I’m struggling to customize the layout of the card. As I don’t have much space on my dashboard I would like to have a slighly smaller card. I think the margins above and on the side of the time picker are quite big (and not configurable). When I adjust the card height with card-mod it gets a scrollbar (which I’ve managed to remove). Is it possible to center the content of the card?
This is the configuration I use to reduce the height and remove the bars:
- type: custom:time-picker-card
entity: input_datetime.koffie_warm
hour_mode: 24
hide:
name: true
style: |
ha-card {
padding: solid green;
height: 111px !important;
width: 230px !important;
box-shadow: none;
}
::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Optionally: Is it also to make this card slightly smaller (zoom out?) so I can fit the width into one box of my grid (instead of 2 boxes at the moment)
Just found the solution:
layout:
embedded: true
I have setup this card and a helper. I can see the helper gets updated. I am a bit confused. What do I need to do next? Do I need to make an automation that checks the helper and then that updates my Entity?
Yes. Just use the time as a trigger. When you choose time first select the fixed time and then select the helper you want to use.
@GeorgeSG Nice card!
Would it be possible to add also a date as input to this card?
I would like to trigger an event on a specific date - e.g. switch my heating to „Home-Mode“ one date before I came back from vaccation
Thank you!
BR
How can I change the font ? I use the minimalist theme, but the font of the custom:time-picker-card is different…
Hi!. Can someone help me change the color of the active selector? As you can see they are skyblue and I can´t change this.
I have tried every combination of the recommended themed variables:
Anyone was able to modify this?
Thanks!
just add this to your theme yml file (it is not part of card_mod):
e.g.:
time-picker-elements-background-color: rgba(76, 175, 80, 1)
reload theme and that’s it:
1 Like
Great card! Is there a way I can make the input numbers bold and maybe change their font size?
Thank you
Not sure that this card is working well with the new ‘Sections’ layout.
Is the card still being maintained? Are there any plans to update it?
Yes, here is my setup
type: custom:time-picker-card
entity: input_datetime.otis_wakker
hour_mode: 24
hour_step: 1
minute_step: 5
layout:
hour_mode: double
align_controls: center
name: inside
embedded: false
thin: true
hide:
seconds: true
layout_options:
grid_columns: 4
grid_rows: 2
name: Otis wekker
link_values: false
card_mod:
style:
.time-picker-row:
time-unit:
$: |
.time-input {
width: 50px !important;
background-color: transparent !important;
color: var(--card-primary-color) !important;
border: 0px !important;
font-size: 3em !important;
font-family: var(--paper-font-body1_-_font-family) !important;
}
1 Like