Date & heure actuelles

Utilisez la date et l’heure actuelles pour afficher des informations et déclencher des actions au moment exact.

Vous pouvez travailler avec un type de donnée Date de la base de données PandaSuite (souvent plus pratique à éditer) ou avec un timestamp (référence universelle).

Dans cet article, vous allez :

• comprendre ce qu’est le timestamp et où le trouver dans PandaSuite
• afficher la date/heure dans l’interface (formatée)
• déclencher une action automatiquement à une date/heure précise
• appliquer les bonnes pratiques (unités, fuseaux horaires, variable “garde”)

Exemples d’usage

• Débloquer automatiquement une section “Événement” à son heure de début
• Afficher une pop-up le jour J
• Masquer une offre à sa date d’expiration
• Lancer une animation ou changer d’état au moment souhaité

Deux approches complémentaires

Type Date (base de données PandaSuite)

• Lisible et éditable directement dans la Base de données PandaSuite (ex. 20/11/2020 10:21:05).
• Idéal pour paramétrer des dates de début/fin sans convertisseur externe.
• Comparaisons et formats simplifiés.

Quand l’utiliser:

• Vous souhaitez saisir/mettre à jour des dates dans PandaSuite Studio.
• Vous ne voulez pas passer par un convertisseur externe.

Timestamp (référence universelle)

Le timestamp correspond au nombre de secondes écoulées depuis le 1er janvier 1970 à 00:00:00 UTC. Il est basé sur l’horloge de l’appareil.

Dans votre projet, il est accessible via le data binding : Depuis le projet > Contexte > Timestamp

Pour définir le timestamp d’une date, si vous utilisez un convertisseur en ligne, vérifiez l’unité :

• En secondes : 1704067200
• En millisecondes : 1704067200000

Dans PandaSuite, nous utilisons la valeur en secondes.

Afficher l’heure dans une application

Objectif : afficher la date/heure actuelle, avec le format de votre choix.

1. Insérez un bloc de texte dans votre écran.
2. Ajoutez un data binding sur le Contenu et choisissez Projet > Contexte > Timestamp comme source de données.
3. Dans la chaîne de fonctions, convertissez en millisecondes si nécessaire: Multiply: 1000
4. Appliquez la fonction Format Date pour définir l’affichage (exemples: HH:mm, dd/MM/yyyy)

Astuce de formatage :

• Format Date attend une valeur en millisecondes. Multipliez le timestamp (secondes) par 1 000 si nécessaire.
• Choisissez le fuseau horaire dans la fonction (ex: UTC, Europe/Paris).
• Exemples de codes : HH:mm (24 h), dd/MM/yyyy, EEEE d MMMM yyyy.

Déclencher une action à une date/heure précise

Objectif : lancer automatiquement une action quand l’heure actuelle atteint votre date cible.

Étape 1 : définir la date cible (en secondes)

Option A — Convertisseur externe

Utilisez un convertisseur (ex: https://www.epochconverter.com/).

Vérifiez l’unité: récupérez la valeur en secondes (ex: 1735689600 pour 1 janvier 2025 00:00:00 UTC).

Pour “minuit à Paris”: calculez le timestamp correspondant à 00:00:00 Europe/Paris, puis utilisez la valeur UTC (le timestamp représente toujours un instant absolu).

Option B — 100% PandaSuite (recommandé si vous éditez la date dans Studio)

Créez une propriété de type Date dans votre base de données PandaSuite (ex: date_cible).

Étape 2 : configurer un composant Condition

Cliquez sur Composants > Condition. Placez-le au niveau du Projet si l’action peut intervenir n’importe où dans l’application. Renommez-le (ex. “Condition date atteinte”). 4) Configurez la condition temporelle

Dans les propriétés du composant Condition, ajoutez une condition avec une expression :

• Données : Projet > Contexte > Timestamp
• Fonction : Supérieur ou égal à
• Valeur : votre timestamp cible (en secondes)

Activez Évaluation automatique.

Note : Évaluation automatique relance la condition quand ses attributs changent, mais le Timestamp ne se met pas à jour tout seul. Il faut programmer son évaluation (étape 3).

Étape 3 : programmer l’évaluation

Choisissez l’une des options suivantes selon le niveau de précision souhaité:

Option 1 — Évaluation périodique (précise, recommandée)

• Ajoutez un Minuteur au niveau du Projet.
• Durée : 1 s.
• Lecture automatique : activée.
• Répétition : activée.
• Dans Actions du Minuteur:
  • Déclencheur : Fin lecture
  • Action : Agir sur un composant > Condition > Évaluer la condition
  • Le cycle se répète toutes les secondes, la condition se déclenche dès que Timestamp ≥ cible.

Option 2 — Évaluation événementielle (simple, moins précise)

• Projet > Déclencheurs :
  • Lancement de projet > Agir sur un composant > Condition > Évaluer la condition
  • Gain de focus > Agir sur un composant > Condition > Évaluer la condition
• Utile si l’application n’a pas besoin d’une précision à la seconde.

Étape 4 : ajouter l’action à exécuter “quand la condition est vraie”

Sélectionnez votre composant Condition > Actions. Déclencheur : Évaluation de la condition. Ajoutez votre action, par exemple :

• Interagir avec un composant > Multi-état > Changer d’état (débloquer un contenu)
• Interagir avec un composant > Pop-up > Ouvrir une Pop-up
• Changer d’écran
• …

Exemple guidé : débloquer une section le jour J

Préparer les états :

• Créez un état “Avant” (section masquée) et un état “Après” (section visible) via les états d’écran ou un composant Multi-état.

Condition :

• Configurez “Date atteinte” (Timestamp ≥ Cible), évaluation automatique activée.

Actions :

• Sur “Évaluation de la condition”: Multi-état > Changer d’état vers “Après”.

Tester :

• Utilisez un timestamp proche (dans quelques minutes) pour valider.

Validation attendue:

• Avant la date cible: section masquée.
• Après la date cible: section visible et persistante.

Bonnes pratiques et points d’attention

• Unités : utilisez un timestamp en secondes dans la condition. Si vous avez des millisecondes, divisez par 1000.
• Fuseau horaire : calculez correctement la date cible selon la zone désirée, puis utilisez sa valeur UTC en secondes.
• Horloge locale : l’heure est celle de l’appareil. Pour des cas sensibles (ex. conformité légale), privilégiez une source de temps validée côté serveur via API (HTTP).
• Déclenchement unique : si besoin, utilisez une variable de type booléan “garde” et mettez-la à true après exécution.
• Portée : placez la Condition au niveau du Projet si le déclenchement doit être global.

Ressources utiles

• Composant Condition
• Propriétés et déclencheurs du Projet
• Actions interactives
• Minuteur
• Fonction Format Date