Affichage des input_datetime

Personnellement, je n’utilise pas de dates dans mes input_datetime, seulement des heures.

Voici ma carte de changement des heures :

Code de la carte
card:
  elements:
    - entity: input_datetime.celui_de_gauche_sur_l_image
      hide:
        name: true
      hour_step: 1
      layout:
        align_controls: center
        name: inside
      link_values: true
      minute_step: 5
      name: ''
      style:
        .: |
          ha-card {
            box-shadow: none;
            background-color: rgba(0,0,0,0);
          }
          .time-picker-row{
            margin-left: 5px !important;
          }
        .time-picker-row:
          .time-picker-content:
            .: |
              .time-separator {
                display: none;
              }
            time-unit:
              $: |
                .time-unit {
                  padding: 2px !important;
                }
                .time-input {
                  border: 2px solid var(--primary-color) !important;
                  background-color: rgba(0,0,0,0) !important;
                  color: black !important;
                  border-radius: 5px;
                }     
                .time-picker-icon {
                  color: var(--primary-color) !important;
                  z-index: 100;
                }
        left: 45%
        top: 50%
      type: 'custom:time-picker-card'
    - entity: input_datetime.celui_de_droite_sur_l_image
      hide:
        name: true
      hour_step: 1
      layout:
        align_controls: center
        name: inside
      link_values: true
      minute_step: 5
      name: ''
      style:
        .: |
          ha-card {
            box-shadow: none;
            background-color: rgba(0,0,0,0);
          }
          .time-picker-row{
            margin-left: 5px !important;
          }
        .time-picker-row:
          .time-picker-content:
            .: |
              .time-separator {
                display: none;
              }
            time-unit:
              $: |
                .time-unit {
                  padding: 2px !important;
                }
                .time-input {
                  border: 2px solid var(--primary-color) !important;
                  background-color: rgba(0,0,0,0) !important;
                  color: black !important;
                  border-radius: 5px;
                }     
                .time-picker-icon {
                  color: var(--primary-color) !important;
                  z-index: 100;
                }
        left: 82%
        top: 50%
      type: 'custom:time-picker-card'
    - entity: sensor.empty
      prefix: Matin
      style:
        font-size: 20px
        left: 13%
        pointer-events: none
        top: 70%
      tap_action:
        action: none
      type: state-label
    - entity: sensor.empty
      icon: 'mdi:coffee'
      style:
        '--paper-item-icon-color': var(--primary-color)
        left: 13%
        pointer-events: none
        top: 35%
      tap_action:
        action: none
      type: state-icon
  image: /local/images/transparent/transparent.png
  type: picture-elements
style: |
  ha-card {
    border: 2px solid var(--primary-color);
    margin: 0px 3px 0px 3px;
  }
type: 'custom:mod-card'

Je l’ai introduite sur le forum ici pour les explications.

Pour la correspondance des heures, je passe justement par ce que j’ai mis dans le topic initial :