Beim Mockup sieht man einfach das hier im Dashboard:
Und es wird der DateRangePicker angezeigt, wenn man auf den angezeigten Zeitraum klickt:
Und ich hatte mir oben viele Fragen gestellt, was passieren soll, wenn man von einem gleitenden Kalender in Abhängigkeit vom laufenden Anwendungszeitraum wechselt, und auch, welcher Tag angezeigt werden soll, wenn ich von einem Zeitraum vom Typ ‹ 7 Tage › zu einem Zeitraum vom Typ ‹ 1 Tag › wechsle… Nun, man kann all das vergessen, denn es wird mit dem DateRangePicker offensichtlich: Der Benutzer entscheidet, ob er zu einer der vordefinierten Perioden (die an heute angeheftet sind) zurückkehren möchte oder ob er den Zeitraum in der Vergangenheit ändern möchte (indem er selbst die gewünschten Daten in den beiden Kalendern auswählt).
Es bleiben nur noch die Regeln für die beiden Buttons „Vorherige/Nächste“ (ich setze sie hier ein):
====== Navigation mit den Pfeilen: ======
- Wenn man auf den linken Pfeil klickt, wird der angezeigte Zeitraum um eine Periode in die Vergangenheit verschoben (das neue Enddatum ist das alte Startdatum)
- Wenn man auf den rechten Pfeil klickt, wird der angezeigte Zeitraum um eine Periode in die Zukunft verschoben (das neue Startdatum ist das alte Enddatum)
Hinweis: Zwei aufeinanderfolgende Aktionen, zuerst linker Pfeil, dann rechter Pfeil (oder umgekehrt), sind ‹ symmetrisch ›; dies bringt die x-Achse genau auf denselben Zeitraum zurück
Sonderfall: Wenn das Enddatum >= jetzt ist, wird der rechte Navigationspfeil deaktiviert (um nicht in die Zukunft zu navigieren, die noch keine Daten hat)
======================
Das ist es, was halten Sie davon?
Ich komme nochmal auf dieses Thema zurück, @pierre-gilles, auch wenn ich vermute, dass es ein zu großes Stück ist, um es in die Superversion aufzunehmen, die du vorbereitest 
Ich habe die Periodenbezeichnungen korrigiert (‹ laufender Monat › statt ‹ dieser Monat ›), und ich habe den Parameter timePickerIncrement auf 1 (Minute) geändert, denn sonst konnte die Auswahl einer vordefinierten Periode (zum Beispiel ‹ aktuelle Woche ›) nicht mit einer Endzeit von 23:59 Uhr angezeigt werden.
Das sieht dann so aus:
Für die Seiten, die mich inspiriert haben, und nun, ich muss zugeben, dass ich bei der weiteren Erkundung von Stripe etwas Gutes gefunden habe:
Ich bin auch auf Folgendes gestoßen: Sélection de périodes [documentation]
Und einige andere Seiten, aber ich finde die Referenzen nicht mehr… Entschuldigung…
Eigentlich habe ich erst, als ich ApexCharts auf einer HTML-Seite auf meinem Computer manipuliert habe, die Möglichkeiten erkannt…
Danke @StephaneB für die Untersuchung, das ist super! 
Tatsächlich wird das für eine zukünftige Version sein!
Ok.
Ich weiß nicht, ob das dir Zeit spart, aber ich teile dir mit, was ich zum Testen dieser Komponente verwendet und wie ich sie konfiguriert habe.
Ich habe keine Ahnung von den Empfehlungen, die du für Gladys-Entwickler gibst, also vielleicht passt das überhaupt nicht. Aber wie ich geschrieben habe, teile ich es trotzdem mit
<!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: 'Übernehmen',
cancelLabel: 'Abbrechen',
daysOfWeek: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
firstDay: 1,
customRangeLabel: 'Benutzerdefiniert',
},
ranges: {
'Letzte 60 Minuten': [moment().subtract(1, 'hours'), moment()],
'Letzte 12 Stunden': [moment().subtract(12, 'hours'), moment()],
'Letzte 24 Stunden': [moment().subtract(1, 'days'), moment()],
'Letzte 7 Tage': [moment().subtract(7, 'days'), moment()],
'Letzte 30 Tage': [moment().subtract(30, 'days'), moment()],
'Letzte 90 Tage': [moment().subtract(90, 'days'), moment()],
'Letzte 365 Tage': [moment().subtract(365, 'days'), moment()],
'Aktuelle Stunde': [moment().startOf('hour'), moment().endOf('hour')],
'Aktuelle Tageshälfte': [moment().startOf('day').add((moment().hour() >= 12 ? 12 : 0), 'hours'), moment().endOf('day').subtract((moment().hour() < 12 ? 12 : 0), 'hours')],
'Aktueller Tag': [moment().startOf('day'), moment().endOf('day')],
'Aktuelle Woche': [moment().startOf('week').add(1, 'days'), moment().endOf('week').add(1, 'days')],
'Aktueller Monat': [moment().startOf('month'), moment().endOf('month')],
'Aktuelles Quartal': [moment().startOf('quarter'), moment().endOf('quarter')],
'Aktuelles Jahr': [moment().startOf('year'), moment().endOf('year')]
}
});
</script>
</body>
</html>
Die anfängliche Funktion ist in der Version 4.85 verfügbar:
@StephaneB Ich sehe, dass du andere Vorschläge gemacht hast. Wenn es einen Bedarf gibt, denke ich, dass ein weiterer Antrag nötig ist 
Danke!!
Ich denke, dass das, was du bisher hinzugefügt hast, bereits sehr praktisch ist. Falls ich im Laufe der Nutzung merke, dass noch etwas fehlt, mache ich einen neuen Feature-Request, okay.