Customisation input.datetime

Bonjour,

Je cherche à customiser l’affichage d’un input.datetime pour que dans le label, je puisse avoir le nombre de jours restant avant de faire une action et la date ou je devrais effectuer cette action. Tous cela au format FR bien entendu.

Voici un exemple visuel:
image

Il faudrait que l’icone passe au rouge si la date est passée.

Voici mon input.datetime:

  pool_filter_date:
    name: Dernier nettoyage
    has_date: true
    has_time: false

Les deux sensors qui calculent le nombre de jours restant et la date:

  - platform: template
    sensors:
      pool_filtre_time:
        friendly_name: "Prochain nettoyage"
        value_template: >
            {% set date_dans_un_an = strptime(states('input_datetime.pool_filter_date'),'%Y-%m-%d') + timedelta(days=15)%}
            le {{ '{:02d}'.format(date_dans_un_an.day)}}/{{ '{:02d}'.format(date_dans_un_an.month) }}/{{ '{:04d}'.format(date_dans_un_an.year) }}
  - platform: template
    sensors:
      pool_filtre_time_rest:
        friendly_name: "Nettoyage du filtre dans"
        unit_of_measurement: "jours"
        value_template: >
          {% set date = strptime(states('input_datetime.pool_filter_date'),'%Y-%m-%d') %}
          {% set date_dans_un_an = strptime(states('input_datetime.pool_filter_date'),'%Y-%m-%d')+ timedelta(days=15) %}
          {{(date_dans_un_an - now().replace(tzinfo=None)).days}}

Il faudrait que a l’appui du bouton, cela entre la date d’aujourd’hui pour relancer le « compte a rebours ».

Je sais pas si je suis très clair sur ma demande ^^
Merci d’avance pour votre aide.

Bonjour,
Bon, pas certain d’avoir tout saisi donc une question ?
C’est une fois par an le nettoyage du filtre ?

Bob

Par exemple oui, je pourrais modifier avec le timedelata

C’est peu con peut être mais sinon tu pouvais dévier un peu l’utilisation de cette intégration :

Hello,

Je n’en suis pas très loin je pense :
image
Le format de la date semble invalide, j’ai repris cela comme template:

custom_card_red_date:
    tap_action:
      action: more-info
    label: |
      [[[ 
            var date = new Date(parseInt(entity.attributes.year), parseInt(entity.attributes.month) - 1, parseInt(entity.attributes.day), 10, 0, 0);
            var date2 = new Date();

            date.setDate(date.getDate() + parseInt(variables.nbJours));
            //var output = date.toLocaleString('FR-fr', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'});
            var output = date.toLocaleString('FR-fr', {year: 'numeric', month: '2-digit', day: '2-digit'});

            const oneDay = (1000 * 60 * 60 * 24); // hours*minutes*seconds*milliseconds
            //var diffDays = Math.round((date - date2) / oneDay);
            var diffDays = parseInt((date - date2) / oneDay);

            return diffDays + " " + (diffDays <= 1 ? "jour" : "jour(s)") + " - " + output;
      ]]]
    styles:
      icon:
        - color: "rgba(15,157,88, 1)"
      img_cell:
        - background-color: "rgba(15,157,88, 0.20)"
    state:
      - operator: template
        value: |
          [[[
              var date = new Date("{0}-{1}-{2}".replace("{0}", entity.attributes.year).replace("{1}", entity.attributes.month).replace("{2}", entity.attributes.day));
              var date2 = new Date();

              date.setDate(date.getDate() + parseInt(variables.nbJours));
              var output = date.toLocaleString('FR-fr', {year: 'numeric', month: '2-digit', day: '2-digit'});

              const oneDay = (1000 * 60 * 60 * 24); // hours*minutes*seconds*milliseconds
              var diffDays = Math.round((date - date2) / oneDay);

              return diffDays < 0;
          ]]]
        styles:
          icon:
            - color: "rgba(219,68,55, 1)"
          img_cell:
            - background-color: "rgba(219,68,55, 0.20)"

Avec ce code pour le bouton:

type: "custom:button-card"
                tap_action:
                  action: "more-info"
                variables:
                  nbjours: 15
                entity: "[[[ return variables.entity_5.entity_id ]]]"
                icon: "[[[ return variables.entity_5.icon ]]]"
                name: "[[[ return variables.entity_5.name ]]]"
                template:
                  - "icon_info_bg"
                  - "custom_card_red_date"
                  #- "card_generic_swap"
                styles:
                  card:
                    - box-shadow: "none"
                    - border-radius: "none"
                    - padding-top: "1px"
                    - padding-bottom: "1px"

Je vais utiliser la custom_card « Elapsed Time » qui correspond a quelque chose pret a ce que je veux faire mais il y a un pb d’affichage que je n’arrive pas a regler:

    [[[
      let endDate = new Date();
      let today = new Date();
      if(entity.attributes.has_date) {
        today = new Date(entity.state.replace(" ", "T"));
      } else { 
        today = new Date().setHours(entity.attributes.hour,entity.attributes.minute,entity.attributes.second);
      }

      const days = parseInt((endDate - today) / (1000 * 60 * 60 * 24));
      const hours = parseInt(Math.abs(endDate - today) / (1000 * 60 * 60) % 24);
      const minutes = parseInt(Math.abs(endDate - today) / (1000 * 60) % 60);

      let text = '';
      if(entity.attributes.has_date) {
        text += days > 0 ? days + ' ' + (days > 1 ? variables.custom_card_eraycetinay_elapsed_time_days : variables.custom_card_eraycetinay_elapsed_time_day) +' ' : '';
      }
      if(entity.attributes.has_time) {
        text += hours > 0 ? hours + ' ' + (hours > 1 ? variables.custom_card_eraycetinay_elapsed_time_hours : variables.custom_card_eraycetinay_elapsed_time_hour) +' ' : '';
      }
      if(entity.attributes.has_time && !entity.attributes.has_date) {
        text += minutes > 0 ? minutes + ' ' + (minutes > 1 ? variables.custom_card_eraycetinay_elapsed_time_minutes : variables.custom_card_eraycetinay_elapsed_time_minute) +' ' : '';
      }

      text = text.length ? text += variables.custom_card_eraycetinay_elapsed_time_ago : variables.custom_card_eraycetinay_elapsed_time_justnow;
      return text;
    ]]]

image

En effet, c’est inverser… je trouve pas dans le code ou changer cela…

Personne n’as une petite idée?

Hello,

J’ai fait autrement, j’ai ajouté dans mon label le statut de deux sensors:

image

return states['sensor.pool_filtre_time'].state + " - " + states['sensor.pool_filtre_time_rest'].state + " jours";

Il faudrait maintenant :

  • si le nombre de jours restant est négatif, mettre « il y a » si positif mettre « dans », tous cela a la place du " - " .
  • changer « jours » ou « jour » en fonction du nombre.
  • et changer la couleur de l’icone si le nombre passe en négatif.

Je sais pas si on peux comparer des dates, car en gros je changerais la couleur si la date du sensor est > a la date d’aujourd’hui, si < et si = .

Et la je sèche …
@Clemalex , pour info et si tu as une idée ^^