Coté maquette, ça donne simplement ça sur le dashboard:
Et ça déploie le DateRangePicker quand on clique sur la période affichée :
Et je m’étais posé plein de questions plus haut sur ce qui doit se passer quand on bascule de calendaire à glissant en fonction de la période en cours d’application, et également quel jour doit être affiché si je bascule d’une période de type ‹ 7 jours › à une période de type ‹ 1 jour ›… Ben on peut oublier tout ça, parce que ça devient évident avec le DateRangePicker : c’est l’utilisateur qui dessine si il veut revenir à l’une des périodes prédéfinies (collées à aujourd’hui), ou si il veut modifier la période en restant dans le passé (en choisissant lui-même les dates souhaitées dans les deux calendriers).
Il reste juste les règles sur les deux boutons précédent/suivant (je les remets ici):
====== Navigation avec les flèches : ======
- Quand on clique sur la flèche gauche, la période affichée est décalée d’une période dans le passé (la nouvelle date de fin est l’ancienne date de début)
- Quand on clique sur la flèche droite, la période affichée est décalée d’une période dans le futur (la nouvelle date de début est l’ancienne date de fin)
Note : Deux actions successives flèche gauche puis flèche droite (ou l’inverse) sont ‹ symétriques › ; cela ramène l’axe des abscisses exactement sur la même période
Cas particulier : Si la date de fin est >= maintenant, la flèche de navigation droite devient inactive (pour ne pas aller explorer dans le futur qui n’a pas encore de données)
======================
Voilà, qu’en pensez-vous ?
2 Likes
Sympa ! Bonne réflexion 
Il va falloir revoir les noms des plages je pense par contre 
Chez Stripe en français par exemple:
« Mois en cours » est plus clair je trouve que « Ce mois ».
Si tu as la liste des sites d’exemples dont tu t’es inspiré je suis preneur !
J’ai reviens sur ce sujet, @pierre-gilles, même si je suppose que c’est un trop gros morceau pour l’inclure dans la super version que tu prépares 
J’ai corrigé les libellés de périodes (‹ mois en cours ›, plutôt que ‹ ce mois ›), et j’ai modifier le paramètre timePickerIncrement à 1 (minute), parce que sinon le choix d’une période prédéfinie (par exemple ‹ semaine en cours ›) ne savait pas s’afficher avec une heure de fin à 23h59.
Ça donne ça:
1 Like
Pour les sites m’ayant inspiré, et bien je dois avouer qu’en explorant plus Stripe, j’ai trouvé ça pas mal :
J’étais aussi tombé là dessus : Sélection de périodes [documentation]
Et quelques autres sites, mais je ne retrouve pas les références… Désolé…
En vrai, c’est ensuite surtout en manipulant ApexCharts dans une page HTML sur mon ordi que je me suis rendu compte des possibilités…
1 Like
Oui c’est un calendrier assez tradi de nos jours, il y a le même egalement sur HA, ou encore sur Grafana.
1 Like
Merci @StephaneB pour l’investigation, c’est top !
Effectivement ça sera pour une prochaine release !
Ok.
Je ne sais pas si ça peut te faire gagner du temps, mais je te partage ce que j’ai utilisé pour tester ce composant et la façon dont je l’ai configuré.
Je n’ai aucune idée des recommandations que tu donnes aux développeurs pour Gladys, donc peut-être que ça ne collera pas du tout. Mais comme je l’ai écrit, autant que je le partage
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment/min/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
</head>
<body>
<center>
<input type="text" id="daterange" size="30">
<script>
$('#daterange').daterangepicker({
"showDropdowns": true,
"timePicker": true,
"timePicker24Hour": true,
"timePickerIncrement": 1,
"linkedCalendars": false,
"alwaysShowCalendars": true,
"opens": "center",
locale: {
format: 'DD/MM/YYYY HH:mm',
applyLabel: 'Appliquer',
cancelLabel: 'Annuler',
daysOfWeek: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
firstDay: 1,
customRangeLabel: 'Personnalisé',
},
ranges: {
'60 dernières minutes': [moment().subtract(1, 'hours'), moment()],
'12 dernières heures': [moment().subtract(12, 'hours'), moment()],
'24 dernières heures': [moment().subtract(1, 'days'), moment()],
'7 derniers jours ': [moment().subtract(7, 'days'), moment()],
'30 dernier jours': [moment().subtract(30, 'days'), moment()],
'90 derniers jours ': [moment().subtract(90, 'days'), moment()],
'365 derniers jours': [moment().subtract(365, 'days'), moment()],
'heure en cours': [moment().startOf('hour'), moment().endOf('hour')],
'demi-journée en cours': [moment().startOf('day').add((moment().hour() >= 12 ? 12 : 0), 'hours'), moment().endOf('day').subtract((moment().hour() < 12 ? 12 : 0), 'hours')],
'journée en cours': [moment().startOf('day'), moment().endOf('day')],
'semaine en cours': [moment().startOf('week').add(1, 'days'), moment().endOf('week').add(1, 'days')],
'mois en cours': [moment().startOf('month'), moment().endOf('month')],
'trimestre en cours': [moment().startOf('quarter'), moment().endOf('quarter')],
'année en cours': [moment().startOf('year'), moment().endOf('year')]
}
});
</script>
</body>
</html>