Commit 1b49b26f authored by Mat's avatar Mat

meilleur rendu du date range slider

parent e12249ce
......@@ -129,97 +129,6 @@
$( "#sortable" ).disableSelection();
} );
// jQRangeSlider
let months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
let dows = ['di', 'lu', 'ma', 'me', 'je', 've', 'sa'];
let firstDay = 1; //lundi
$("#dateRuleSlider").dateRangeSlider({
bounds: {
min: new Date(2018, 5, 1),
max: new Date(2018, 8, 1)
},
defaultValues: {
min: new Date(2018, 5, 10),
max: new Date(2018, 5, 17)
},
arrows: true,
step:{
days: 1
},
formatter: function(valeur){
let dow = dows[valeur.getDay()],
days = valeur.getDate(),
month = valeur.getMonth() + 1,
year = valeur.getFullYear();
return dow + " " + formatNumber(days, 2) + "/" + formatNumber(month, 2) + "/" + year;
},
scales: [{
first: function(value){ return value; },
end: function(value) {return value; },
next: function(value){
let next = new Date(value);
return new Date(next.setMonth(value.getMonth() + 1));
},
label: function(value){
return months[value.getMonth()];
}
},
{
first: function(value){ return value; },
end: function(value) {return value; },
next: function(value){
let next = new Date(value);
if (value.getDay() === firstDay) {
return new Date(next.setDate(value.getDate() + 7));
} else {
function firstJump(i, d) {
let c = 0;
while (i !== d) {
if (i === 6) { i = 0; } else { i++; }
c++;
}
return c;
}
let jump = firstJump(value.getDay(), firstDay);
return new Date(next.setDate(value.getDate() + jump));
}
},
label: function(value) {
//return dow[value.getDay()];
//return value.getDate();
return null;
}
},
{
first: function(value){ return value; },
end: function(value) {return value; },
next: function(value){
let next = new Date(value);
let jump = 1;
if (value.getDay() === firstDay || value.getDate() === 1) {
jump++;
}
console.log(value.getDate() + ' ' + value.getDay() + ' ' + jump);
return new Date(next.setDate(value.getDate() + 1));
},
label: function() {
return null;
},
format: function(tickContainer, tickStart, tickEnd){
if (tickStart.getDay() === firstDay || tickStart.getDate() === 1) {
tickContainer.addClass("no-tick");
}
console.log();
}
}]
});
{% include '@Potage/LettreInfos/ajaxDisplay.js' %}
</script>
......
......@@ -124,9 +124,9 @@ sortForm.addEventListener('submit', function(e)
/*
*
* Modifier le bloc Lettre (aside droite)
*
* Modifier la lettre
*
* read et update de la Lettre
*
*/
......@@ -193,3 +193,96 @@ form.addEventListener('submit', function(e)
$('.form-lettre-modal').modal('hide'); // en jquery
}, form);
});
/*
*
* jQRangeSlider
*
* glissière jquery pour le formLettre
* started_at <-> ended_at
*
*/
let months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
let dows = ['di', 'lu', 'ma', 'me', 'je', 've', 'sa'];
let firstDay = 1; //lundi
$("#dateRuleSlider").dateRangeSlider({
bounds: {
min: new Date(2018, 5, 1),
max: new Date(2018, 8, 20)
},
defaultValues: {
min: new Date(2018, 5, 29),
max: new Date(2018, 6, 6)
},
arrows: true,
step:{
days: 1
},
formatter: function(valeur){
let dow = dows[valeur.getDay()],
days = valeur.getDate(),
month = valeur.getMonth() + 1,
year = valeur.getFullYear();
return dow + " " + formatNumber(days, 2) + "/" + formatNumber(month, 2);
},
scales: [{
first: function(value){ return value; },
end: function(value) {return value; },
next: function(value){
let next = new Date(value);
return new Date(next.setMonth(value.getMonth() + 1));
},
label: function(value){
return months[value.getMonth()] + " " + value.getFullYear();
}
},
{
first: function(value){ return value; },
end: function(value) {return value; },
next: function(value){
let next = new Date(value);
if (value.getDay() === firstDay) {
return new Date(next.setDate(value.getDate() + 7));
} else {
function firstJump(i, d) {
let c = 0;
while (i !== d) {
if (i === 6) { i = 0; } else { i++; }
c++;
}
return c;
}
let jump = firstJump(value.getDay(), firstDay);
return new Date(next.setDate(value.getDate() + jump));
}
},
label: function() { return null; },
format: function(tickContainer, tickStart, tickEnd){
if (tickStart.getDate() === 1) {
tickContainer.addClass("no-tick");
}
}
},
{
first: function(value){ return value; },
end: function(value) {return value; },
next: function(value){
let next = new Date(value);
return new Date(next.setDate(value.getDate() + 1));
},
label: function() { return null; },
format: function(tickContainer, tickStart, tickEnd){
if (tickStart.getDay() === firstDay || tickStart.getDate() === 1) {
tickContainer.addClass("no-tick");
}
}
}]
});
.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-inner {
margin-top: 22px;
height: 8px;
}
.ui-ruler-scale1 span.ui-ruler-tick-label {
position: absolute;
margin-top: -10px;
......@@ -14,12 +10,19 @@
background-color: #007bff;
border: 1px solid #2d2a2a;
}
.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-label {
margin-left: 9px;
}
.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-inner {
margin-top: 22px;
height: 8px;
}
.ui-rangeSlider .ui-ruler-scale2 .ui-ruler-tick-inner {
border-left: 1px solid white;
margin-top: 24px;
height: 1px;
}
.ui-rangeSlider .ui-ruler-scale2 .no-tick .ui-ruler-tick-inner {
.ui-rangeSlider .no-tick .ui-ruler-tick-inner {
border: 0;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment