Manuel de conception de l'Infobase Santé
Table des matières
Sélecteur chronologique
Les sélecteurs chronologiques permettent aux utilisateurs de visualiser des données pour une période spécifique.
Sur cette page
Quand utiliser cette composante
- Lorsque les données couvrent une longue périodes.
- Pour permettre un zoom avant et arrière sur une longue période.
Quoi éviter
- N'utilisez pas de sélecteur chronologique si la période couverte est courte.
- N'utilisez pas de sélecteur chronologique s'il n'est pas utile de regarder différentes périodes.
Design et code
Instructions
Les données de la page changent pour refléter la plage de dates que vous sélectionnez ci-dessous. Sélectionnez une plage de dates dans le menu déroulant, utilisez le curseur pour définir votre plage de dates ou tapez les dates directement dans les cases « De » et « À ».
HTML
<!-- Ajouter ces références -->
<link rel="stylesheet" href="/src/js/noUiSlider-15.5.1/dist/nouislider.css">
<link rel="stylesheet" href="/src/css/selectpicker/bootstrap-select.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
<!-- Ajouter ce code HTML dans la section où vous voulez ajouter le sélecteur chronologique -->
<h3>Instructions</h3>
<p>
<i class="fa fa-info-circle" aria-hidden="true"></i> Les données de la page changent pour refléter la plage de dates que vous sélectionnez ci-dessous. Sélectionnez une plage de dates dans le menu déroulant, utilisez le curseur pour définir votre plage de dates ou tapez les dates directement dans les cases « De » et « À ».
</p>
<div class="col-md-12 sliderDiv" style="margin-top: 20px;margin-bottom: 20px;border: 1px solid black; padding: 30px 20px 40px 20px; border: 3px solid #ccc; border-radius: 10px;">
<div>
<span style="font-size:30px;font-weight:bold;">
<span class="badge hidden-xs" style="font-size: 30px;padding: 10px 10px;background: rgb(51, 160, 44);">
<i class="far fa-calendar-alt"></i>
</span>
<label for="dateSelection">Montrer les donnée <span class="hidden-xs">consignées</span> pour <span class="wb-inv">votre sélection de dates :</span>
</label>
<select id="dateSelection">
<option selected value="alltime">toutes les périodes</option>
<option value="thisyear">cette année</option>
<option value="lastyear">l'an passé</option>
<option value="lastmonth">le mois passé</option>
<option value="customrange">une plage de dates précises</option>
</select>
</span>
<div style="display: none;">
<input type="date" id="startdate" name="startdate" min="2021-03-27" max="2022-05-07" data-role="none">
</div>
<div class="row" style="margin: 0 auto; margin-top: 15px;">
<div class="col-xs-6 col-lg-2 dateStartDiv" style="padding-left: 0px;">
<label for="dateStart">From</label>
<select data-width="150px" data-dropdownAlignRight="true" data-dropupAuto="false" data-live-search="true" class="selectpicker" id="dateStart"></select>
</div>
<div class="col-xs-6 col-lg-2 col-lg-push-8 dateEndDiv" style="padding-right: 0px;">
<label for="dateEnd">To</label>
<select data-width="150px" data-dropdownAlignRight="true" data-dropupAuto="false" data-live-search="true" class="selectpicker" id="dateEnd"></select>
</div>
<div id="slider" class="col-xs-12 col-lg-pull-2 col-lg-8"></div>
</div>
</div>
</div>CSS
.actionBtn {
/*background-color: lightgray;*/
border: 1px solid lightgray;
/*font-weight: bold;*/
margin: 3px;
border-radius: 4px;
}
.bootstrap-select>.dropdown-toggle {
background: white;
border: 3px solid black;
}
.dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
@media only screen and (max-width: 1200px) {
#slider {
display: inline-block;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 70px;
width: 80.6% !important;
}
}
#slider {
display: inline-block;
margin-left: 40px;
margin-right: 40px;
width: 58%;
margin-top: 25px;
}
.noUi-connect {
background: rgb(51, 160, 44);
}
.noUi-pips {
color: #000;
}
.noUi-marker {
background: #000;
}
.noUi-value-large {
font-size: 15px;
}JS
<!-- Ajouter ces références -->
<script src="/src/js/d3.v5.min.js"></script>
<script src="/src/js/noUiSlider-15.5.1/dist/nouislider.js"></script>
<script src="/src/js/bootstrap-select/bootstrap-select.js"></script>
<!-- Ajouter ce script pour modifier les menus déroulant -->
<script type="text/javascript">
let dates = ["2020-10-29", "2020-11-01", "2020-11-05", "2020-11-06", "2020-11-08", "2020-11-09", "2020-11-12", "2020-11-15", "2020-11-16", "2020-11-19", "2020-11-22", "2020-11-23", "2020-11-26", "2020-11-29", "2020-11-30", "2020-12-01", "2020-12-03", "2020-12-04", "2020-12-06", "2020-12-07", "2020-12-08", "2020-12-09", "2020-12-10", "2020-12-11", "2020-12-13", "2020-12-14", "2020-12-15", "2020-12-16", "2020-12-17", "2020-12-18", "2020-12-20", "2020-12-21", "2020-12-22", "2020-12-23", "2020-12-24", "2020-12-27", "2020-12-28", "2020-12-29", "2020-12-30", "2020-12-31", "2021-01-03", "2021-01-04", "2021-01-05", "2021-01-06", "2021-01-07", "2021-01-08", "2021-01-10", "2021-01-11", "2021-01-12", "2021-01-13", "2021-01-14", "2021-01-15", "2021-01-17", "2021-01-18", "2021-01-19", "2021-01-20", "2021-01-21", "2021-01-22", "2021-01-24", "2021-01-25", "2021-01-26", "2021-01-27", "2021-01-28", "2021-01-29", "2021-01-31", "2021-02-01", "2021-02-02", "2021-02-03", "2021-02-04", "2021-02-05", "2021-02-07", "2021-02-08", "2021-02-09", "2021-02-10", "2021-02-11", "2021-02-12", "2021-02-14", "2021-02-15", "2021-02-16", "2021-02-17", "2021-02-18", "2021-02-19", "2021-02-21", "2021-02-22", "2021-02-23", "2021-02-24", "2021-02-25", "2021-02-26", "2021-02-28", "2021-03-01", "2021-03-02", "2021-03-03", "2021-03-04", "2021-03-05", "2021-03-07", "2021-03-08", "2021-03-09", "2021-03-10", "2021-03-11", "2021-03-12", "2021-03-14", "2021-03-15", "2021-03-16", "2021-03-17", "2021-03-18", "2021-03-19", "2021-03-21", "2021-03-22", "2021-03-23", "2021-03-24", "2021-03-25", "2021-03-26", "2021-03-27", "2021-03-28", "2021-03-29", "2021-03-30", "2021-03-31", "2021-04-01", "2021-04-03", "2021-04-04", "2021-04-05", "2021-04-06", "2021-04-07", "2021-04-08", "2021-04-10", "2021-04-11", "2021-04-12", "2021-04-13", "2021-04-14", "2021-04-15", "2021-04-17", "2021-04-18", "2021-04-19", "2021-04-20", "2021-04-21", "2021-04-22", "2021-04-23", "2021-04-24", "2021-04-25", "2021-04-26", "2021-04-27", "2021-04-28", "2021-04-29", "2021-04-30", "2021-05-01", "2021-05-02", "2021-05-03", "2021-05-04", "2021-05-05", "2021-05-06", "2021-05-07", "2021-05-08", "2021-05-09", "2021-05-10", "2021-05-11", "2021-05-12", "2021-05-13", "2021-05-14", "2021-05-15", "2021-05-16", "2021-05-17", "2021-05-18", "2021-05-19", "2021-05-20", "2021-05-21", "2021-05-22", "2021-05-23", "2021-05-24", "2021-05-25", "2021-05-26", "2021-05-27", "2021-05-28", "2021-05-29", "2021-05-30", "2021-05-31", "2021-06-01", "2021-06-02", "2021-06-03", "2021-06-04", "2021-06-05", "2021-06-06", "2021-06-07", "2021-06-08", "2021-06-09", "2021-06-10", "2021-06-11", "2021-06-12", "2021-06-13", "2021-06-14", "2021-06-15", "2021-06-16", "2021-06-17", "2021-06-19", "2021-06-20", "2021-06-21", "2021-06-22", "2021-06-23", "2021-06-24", "2021-06-25", "2021-06-26", "2021-06-27", "2021-06-28", "2021-06-29", "2021-06-30", "2021-07-01", "2021-07-02", "2021-07-03", "2021-07-04", "2021-07-05", "2021-07-06", "2021-07-07", "2021-07-08", "2021-07-09", "2021-07-10", "2021-07-11", "2021-07-12", "2021-07-13", "2021-07-14", "2021-07-15", "2021-07-16", "2021-07-17", "2021-07-18", "2021-07-19", "2021-07-20", "2021-07-21", "2021-07-22", "2021-07-23", "2021-07-24", "2021-07-25", "2021-07-26", "2021-07-27", "2021-07-28", "2021-07-29", "2021-07-30", "2021-07-31", "2021-08-01", "2021-08-02", "2021-08-03", "2021-08-04", "2021-08-05", "2021-08-06", "2021-08-07", "2021-08-08", "2021-08-09", "2021-08-10", "2021-08-11", "2021-08-12", "2021-08-13", "2021-08-14", "2021-08-15", "2021-08-16", "2021-08-17", "2021-08-18", "2021-08-19", "2021-08-20", "2021-08-21", "2021-08-22", "2021-08-23", "2021-08-24", "2021-08-25", "2021-08-26", "2021-08-27", "2021-08-28", "2021-08-29", "2021-08-30", "2021-09-01", "2021-09-02", "2021-09-03", "2021-09-04", "2021-09-05", "2021-09-06", "2021-09-07", "2021-09-08", "2021-09-09", "2021-09-10", "2021-09-11", "2021-09-12", "2021-09-13", "2021-09-14", "2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19", "2021-09-20", "2021-09-21", "2021-09-22", "2021-09-23", "2021-09-24", "2021-09-25", "2021-09-26", "2021-09-27", "2021-09-28", "2021-09-29", "2021-09-30", "2021-10-01", "2021-10-02", "2021-10-03", "2021-10-04", "2021-10-05", "2021-10-06", "2021-10-07", "2021-10-08", "2021-10-09", "2021-10-10", "2021-10-11", "2021-10-12", "2021-10-13", "2021-10-14", "2021-10-15", "2021-10-16", "2021-10-17", "2021-10-18", "2021-10-19", "2021-10-20", "2021-10-21", "2021-10-22", "2021-10-23", "2021-10-24", "2021-10-25", "2021-10-26", "2021-10-27", "2021-10-28", "2021-10-29", "2021-10-30", "2021-10-31", "2021-11-01", "2021-11-02", "2021-11-03", "2021-11-04", "2021-11-05", "2021-11-06", "2021-11-07", "2021-11-08", "2021-11-09", "2021-11-10", "2021-11-11", "2021-11-12", "2021-11-13", "2021-11-14", "2021-11-15", "2021-11-16", "2021-11-17", "2021-11-18", "2021-11-19", "2021-11-20", "2021-11-21", "2021-11-22", "2021-11-23", "2021-11-24", "2021-11-25", "2021-11-26", "2021-11-27", "2021-11-28", "2021-11-29", "2021-11-30", "2021-12-01", "2021-12-02", "2021-12-03", "2021-12-04", "2021-12-05", "2021-12-06", "2021-12-07", "2021-12-08", "2021-12-09", "2021-12-10", "2021-12-11", "2021-12-12", "2021-12-13", "2021-12-14", "2021-12-15", "2021-12-16", "2021-12-17", "2021-12-18", "2021-12-19", "2021-12-20", "2021-12-21", "2021-12-22", "2021-12-23", "2021-12-25", "2021-12-26", "2021-12-27", "2021-12-28", "2021-12-29", "2021-12-30", "2021-12-31", "2022-01-01", "2022-01-02", "2022-01-03", "2022-01-04", "2022-01-05", "2022-01-06", "2022-01-07", "2022-01-08", "2022-01-09", "2022-01-10", "2022-01-11", "2022-01-12", "2022-01-13", "2022-01-14", "2022-01-15", "2022-01-16", "2022-01-17", "2022-01-18", "2022-01-19", "2022-01-20", "2022-01-21", "2022-01-22", "2022-01-23", "2022-01-24", "2022-01-25", "2022-01-26", "2022-01-27", "2022-01-28", "2022-01-29", "2022-01-30", "2022-01-31", "2022-02-01", "2022-02-02", "2022-02-03", "2022-02-04", "2022-02-05", "2022-02-06", "2022-02-07", "2022-02-08", "2022-02-09", "2022-02-10", "2022-02-11", "2022-02-12", "2022-02-13", "2022-02-14", "2022-02-15", "2022-02-16", "2022-02-17", "2022-02-18", "2022-02-19", "2022-02-20", "2022-02-21", "2022-02-22", "2022-02-23", "2022-02-24", "2022-02-25", "2022-02-26", "2022-02-27", "2022-02-28", "2022-03-01", "2022-03-02", "2022-03-03", "2022-03-04", "2022-03-05", "2022-03-06", "2022-03-07", "2022-03-08", "2022-03-09", "2022-03-10", "2022-03-11", "2022-03-12", "2022-03-13", "2022-03-14", "2022-03-15", "2022-03-16", "2022-03-17", "2022-03-18", "2022-03-19", "2022-03-20", "2022-03-21", "2022-03-22", "2022-03-23", "2022-03-24", "2022-03-25", "2022-03-26", "2022-03-27", "2022-03-28", "2022-03-29", "2022-03-30", "2022-03-31", "2022-04-01", "2022-04-02", "2022-04-03", "2022-04-04", "2022-04-05", "2022-04-06", "2022-04-07", "2022-04-08", "2022-04-09", "2022-04-10", "2022-04-11", "2022-04-12", "2022-04-13", "2022-04-14", "2022-04-15", "2022-04-16", "2022-04-17", "2022-04-18", "2022-04-19", "2022-04-20", "2022-04-21", "2022-04-22", "2022-04-23", "2022-04-24", "2022-04-25", "2022-04-26", "2022-04-27", "2022-04-28", "2022-04-29", "2022-04-30", "2022-05-01", "2022-05-02", "2022-05-03", "2022-05-04", "2022-05-05", "2022-05-06", "2022-05-07", "2022-05-08", "2022-05-09", "2022-05-10", "2022-05-11", "2022-05-12", "2022-05-13", "2022-05-14", "2022-05-15", "2022-05-16", "2022-05-17", "2022-05-18", "2022-05-19", "2022-05-20", "2022-05-21", "2022-05-22", "2022-05-23", "2022-05-24", "2022-05-25", "2022-05-26", "2022-05-27", "2022-05-28", "2022-05-29", "2022-05-30", "2022-05-31", "2022-06-01", "2022-06-02", "2022-06-03", "2022-06-04", "2022-06-05", "2022-06-06", "2022-06-07", "2022-06-08", "2022-06-09", "2022-06-10", "2022-06-11", "2022-06-12", "2022-06-13", "2022-06-14", "2022-06-15", "2022-06-16", "2022-06-17", "2022-06-18", "2022-06-19", "2022-06-20", "2022-06-21", "2022-06-22", "2022-06-23", "2022-06-24", "2022-06-25", "2022-06-26", "2022-06-27", "2022-06-28", "2022-06-29", "2022-06-30", "2022-07-01", "2022-07-02", "2022-07-03", "2022-07-04", "2022-07-05", "2022-07-06", "2022-07-07", "2022-07-08", "2022-07-09", "2022-07-10", "2022-07-11", "2022-07-12", "2022-07-13", "2022-07-14", "2022-07-15", "2022-07-16", "2022-07-17", "2022-07-18", "2022-07-19", "2022-07-20", "2022-07-21", "2022-07-22", "2022-07-23", "2022-07-24", "2022-07-25", "2022-07-26", "2022-07-27", "2022-07-28", "2022-07-29", "2022-07-30", "2022-07-31", "2022-08-01", "2022-08-02", "2022-08-03", "2022-08-04", "2022-08-05", "2022-08-06", "2022-08-07", "2022-08-08", "2022-08-09", "2022-08-10", "2022-08-11", "2022-08-12", "2022-08-13", "2022-08-14", "2022-08-15", "2022-08-16", "2022-08-17", "2022-08-18", "2022-08-19", "2022-08-20", "2022-08-21", "2022-08-22", "2022-08-23", "2022-08-24", "2022-08-25", "2022-08-26", "2022-08-27", "2022-08-28", "2022-08-29", "2022-08-30", "2022-08-31", "2022-09-01", "2022-09-02", "2022-09-03", "2022-09-04", "2022-09-05", "2022-09-06", "2022-09-07", "2022-09-08", "2022-09-09", "2022-09-10", "2022-09-11", "2022-09-12", "2022-09-13", "2022-09-14", "2022-09-15", "2022-09-16", "2022-09-17", "2022-09-18", "2022-09-19", "2022-09-20", "2022-09-21", "2022-09-22", "2022-09-23", "2022-09-24", "2022-09-25", "2022-09-26", "2022-09-27", "2022-09-28", "2022-09-29", "2022-09-30", "2022-10-01", "2022-10-02", "2022-10-03", "2022-10-04", "2022-10-05", "2022-10-06", "2022-10-07", "2022-10-08", "2022-10-09", "2022-10-10", "2022-10-11", "2022-10-12", "2022-10-13", "2022-10-14", "2022-10-15", "2022-10-16", "2022-10-17", "2022-10-18", "2022-10-19", "2022-10-20", "2022-10-21", "2022-10-22", "2022-10-23", "2022-10-24", "2022-10-25", "2022-10-26", "2022-10-27", "2022-10-28", "2022-10-29", "2022-10-30", "2022-10-31", "2022-11-01", "2022-11-02", "2022-11-03", "2022-11-04", "2022-11-05", "2022-11-06", "2022-11-07", "2022-11-08", "2022-11-09", "2022-11-10", "2022-11-11", "2022-11-12", "2022-11-13", "2022-11-14", "2022-11-15", "2022-11-16", "2022-11-17", "2022-11-18", "2022-11-19", "2022-11-20", "2022-11-21", "2022-11-22", "2022-11-23", "2022-11-24", "2022-11-25", "2022-11-26", "2022-11-27", "2022-11-28", "2022-11-29", "2022-11-30", "2022-12-01", "2022-12-02", "2022-12-03", "2022-12-04", "2022-12-05", "2022-12-06", "2022-12-07", "2022-12-08", "2022-12-09", "2022-12-10", "2022-12-11", "2022-12-12", "2022-12-13", "2022-12-14", "2022-12-15", "2022-12-16", "2022-12-17", "2022-12-18", "2022-12-19", "2022-12-20", "2022-12-21", "2022-12-22", "2022-12-23", "2022-12-24", "2022-12-25", "2022-12-26", "2022-12-27", "2022-12-28", "2022-12-29", "2022-12-30", "2022-12-31", "2023-01-01", "2023-01-02", "2023-01-03", "2023-01-04", "2023-01-05", "2023-01-06", "2023-01-07", "2023-01-08", "2023-01-09", "2023-01-10", "2023-01-11", "2023-01-12"]
let init_startIndex = 0;
let init_endIndex = dates.length - 1;
let slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [init_startIndex, init_endIndex],
connect: true,
step: 1,
margin: 1,
keyboardPageMultiplier: 15, // Default 5
// keyboardMultiplier: 50, // Default 1
range: {
'min': 0,
'max': dates.length - 1
},
pips: {
// mode: 'steps',
// // values: 3,
// filter: function(d){
// return 0;
// },
// density: 2,
mode: 'count',
values: 3,
density: 2,
stepped: true,
format: {
// 'to' the formatted value. Receives a number.
to: function(value) {
return dates[Math.round(value)];
},
// 'from' the formatted value.
// Receives a string, should return a number.
from: function(value) {
return dates.indexOf(value);
}
}
}
});
addInteraction();
function addInteraction() {
function createDatalist(startDateString, endDateString) {
d3.selectAll("#dateStart option").remove();
d3.select("#dateEnd").selectAll("option").remove();
let startIndex = document.getElementById('slider').noUiSlider.get()[0];
let endIndex = document.getElementById('slider').noUiSlider.get()[1];
dates.forEach(function(d, i) {
if (i >= 0 && i < endIndex) {
d3.select("#dateStart").append("option").attr("value", d).text(d)
}
if (i <= dates.length && i < startIndex) {
d3.select("#dateEnd").append("option").attr("value", d).text(d)
}
})
// $('#dateStart').reverseChildren()
$('#dateStart').val(dates[parseInt(startIndex)])
// $('#dateEnd').reverseChildren()
$('#dateEnd').val(dates[parseInt(endIndex)])
$('#dateStart,#dateEnd').selectpicker({
dropdownAlignRight: true,
dropupAuto: false,
size: 5
});
$('.selectpicker').selectpicker('refresh')
$('.dateStartDiv .filter-option-inner-inner').text(dates[parseInt(startIndex)]).attr("title", dates[parseInt(startIndex)])
$('.dateEndDiv .filter-option-inner-inner').text(dates[parseInt(endIndex)]).attr("title", dates[parseInt(endIndex)])
}
createDatalist(dates[0], dates[dates.length - 1])
$(".dateStartDiv .dropdown-toggle").keyup(function(event) {
if (event.keyCode === 13) {
$('.dateStartDiv .selectpicker').selectpicker('toggle')
}
});
$(".dateEndDiv .dropdown-toggle").keyup(function(event) {
if (event.keyCode === 13) {
$('.dateEndDiv .selectpicker').selectpicker('toggle')
}
});
$("#dateStart").on("change", function(event) {
let currString = $(this).val()
let endDateString = $("#dateEnd").val();
createDatalist(currString, endDateString)
setSliderHandles(currString, endDateString)
// updateTable(nestedData_region_site_fraction_date_entries);
// updateTitleDates()
// setPage_qs();
})
$("#dateEnd").on("change", function(d, i) {
let currString = $(this).val();
let startDateString = $("#dateStart").val();
createDatalist(startDateString, currString)
setSliderHandles(startDateString, currString);
// updateTable(nestedData_region_site_fraction_date_entries);
// updateTitleDates()
// setPage_qs();
})
$("#dateSelection").on("change", function() {
let dropdownVal = $(this).val();
if (dropdownVal == "customrange") {
// updateTable(nestedData_region_site_fraction_date_entries);
} else if (dropdownVal == "alltime") {
let firstDate = dates[0]
let lastDate = dates[dates.length - 1]
setSliderHandles(firstDate, lastDate)
} else if (dropdownVal == "thisyear") {
let thisYear = new Date().getFullYear();
let thisYearDates = dates.filter(function(d, i) {
return d.indexOf(thisYear) != -1;
})
let firstDateThisYear = thisYearDates[0]
let mostRecenttDateThisYear = thisYearDates[thisYearDates.length - 1]
setSliderHandles(firstDateThisYear, mostRecenttDateThisYear)
} else if (dropdownVal == "lastyear") {
let lastYear = new Date().getFullYear() - 1;
let lastYearDates = dates.filter(function(d, i) {
return d.indexOf(lastYear) != -1;
})
let firstDateLastYear = lastYearDates[0]
let mostRecenttDateLastYear = lastYearDates[lastYearDates.length - 1]
setSliderHandles(firstDateLastYear, mostRecenttDateLastYear)
} else if (dropdownVal == "lastmonth") {
let lastMonth = new Date();
lastMonth.setMonth(lastMonth.getMonth() - 1)
let thisYear = lastMonth.getFullYear();
lastMonth = lastMonth.getMonth() + 1;
if (lastMonth < 10) lastMonth = "0" + lastMonth
let lastMonthDates = dates.filter(function(d, i) {
return d.indexOf(thisYear + "-" + lastMonth) != -1;
})
// console.log(lastMonthDates)
let firstDateLastMonth = lastMonthDates[0]
let mostRecenttDateLastMonth = lastMonthDates[lastMonthDates.length - 1]
setSliderHandles(firstDateLastMonth, mostRecenttDateLastMonth)
// check month part of date string to see if lastMonth.getMonth() index not -1
}
// __SETTINGS.dateSel = dropdownVal;
// setPage_qs();
});
let setSliderHandles = function(firstDate, lastDate) {
let startIndex = dates.indexOf(firstDate)
let endIndex = dates.indexOf(lastDate)
slider.noUiSlider.set([startIndex, endIndex])
$('.dateStartDiv .filter-option-inner-inner').text(dates[parseInt(startIndex)]).attr("title", dates[parseInt(startIndex)])
$('.dateEndDiv .filter-option-inner-inner').text(dates[parseInt(endIndex)]).attr("title", dates[parseInt(endIndex)])
// $('#dateEnd').val(dates[parseInt(lastIndex)])
createDatalist(dates[parseInt(startIndex)], dates[parseInt(endIndex)])
// $('#dateStart').attr("placeholder", (dates[parseInt(startIndex)]))
// $('#dateEnd').attr("placeholder", (dates[parseInt(endIndex)]))
// updateTable(nestedData_region_site_fraction_date_entries);
// filterData(originalData, true);
// updateTitleDates()
}
document.getElementById('slider').noUiSlider.on('slide', function(e) {
let startIndex = document.getElementById('slider').noUiSlider.get()[0];
let endIndex = document.getElementById('slider').noUiSlider.get()[1];
$('.dateStartDiv .filter-option-inner-inner').text(dates[parseInt(startIndex)]).attr("title", dates[parseInt(startIndex)])
$('.dateEndDiv .filter-option-inner-inner').text(dates[parseInt(endIndex)]).attr("title", dates[parseInt(endIndex)])
$("#dateSelection").val("customrange")
})
document.getElementById('slider').noUiSlider.on('change', function(e) {
// Slider selection finished, do a ting below
let startIndex = document.getElementById('slider').noUiSlider.get()[0];
let endIndex = document.getElementById('slider').noUiSlider.get()[1];
//console.log(dates[parseInt(startIndex)], dates[parseInt(endIndex)])
createDatalist(dates[parseInt(startIndex)], dates[parseInt(endIndex)])
// updateTable(nestedData_region_site_fraction_date_entries);
// filterData(originalData, true);
// updateTitleDates();
// setPage_qs();
})
}
</script>Lignes directrices sur le contenu et le design
- Faites de la période par défaut une période significative qui présente des données intéressantes. Selon les données, il peut s'agir des 2 dernières semaines, des 6 derniers mois, etc.
- Suivez les lignes directrices générales sur le design.
Lignes directrices sur l'accessibilité
- Suivez les lignes directrices générales sur l'accessibilité.
- Date de modification :