Bonjour,
Je viens de réaliser un date-picker. Il marche correctement. Seulement, je me demandais si ce n'était pas un peu trop brouillon.
J'aurai aimé avoir votre avis quand à la disposition du code. Faut-il l'aérer ? Mieux utiliser la touche tab ?
Désolé je sais que ma question peux paraître stupide à certain, mais je suis nouveau en programmation.
Comment organisez-vous votre code javascript, pour le rendre mieux lisible ?
Mon javascript :
const input_date_elmt = document.querySelector('.selected-date');
const date_picker = document.querySelector('.date-picker');
const month_picker = document.querySelector('.mth');
const next_month = document.querySelector('.next-mth');
const previous_month = document.querySelector('.prev-mth');
const days = document.querySelector('.days');
const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
let amount_days = 0;
let d = new Date ();
let day = d.getDate(); // getDate = get the day
let month = d.getMonth();
let year = d.getFullYear();
let selectedDate = d;
let selectedDay = day;
let selectedMonth = month;
let selectedYear = year;
month_picker.textContent = monthNames[month] + ' ' + year;
days_to_day(); // Show the days
input_date_elmt.value = formatDate(d);
//Event listener
input_date_elmt.addEventListener('click', toggleDatePicker);
next_month.addEventListener('click', nxtMonthPicker);
previous_month.addEventListener('click', prevMonthPicker);
function toggleDatePicker (){ // Affiche ou cache le date-picker
if (date_picker.style.display === "none") {
date_picker.style.display = "block";
} else {
date_picker.style.display = "none";
}
}
function nxtMonthPicker(){ // Passe au prochain mois
month++;
if(month > 11){
month = 0;
year++;
}
month_picker.textContent = monthNames[month] + ' ' + year;
days_to_day();
}
function prevMonthPicker(){ // Passe au mois précédent
month--;
if(month < 0){
month = 11;
year--;
}
month_picker.textContent = monthNames[month] + ' ' + year;
days_to_day();
}
function formatDate(date){ // Ecrit la date sous le bon format (pour la balise input);
let day = date.getDate();
if(day < 10){
day = '0' + day;
}
let month = date.getMonth() + 1;
if(month < 10){
month = '0' + month;
}
let year = date.getFullYear();
return year + '-' + month + '-' + day;
}
function leapYear(yr) // Vérifie si utilisateur est dans une année bissextile
{
return ((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0);
}
function days_to_day(){ // affiche les jours du mois en cours
days.innerHTML = '';
if(month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11)
{
amount_days = 31;
}
else if (month == 3 || month == 5 || month == 8 || month == 10)
{
amount_days = 30;
}
else
{
if(leapYear(year))
{
amount_days = 29;
}
else
{
amount_days = 28;
}
}
for (var i = 0; i < amount_days; i++) { // créer les divs day
const day_elmt = document.createElement('div');
day_elmt.classList.add('day');
day_elmt.textContent = i + 1;
days.appendChild(day_elmt);
if(selectedDay == i + 1 && selectedMonth == month && selectedYear == year || selectedDay == i + 1 && selectedMonth == month + 1 && selectedYear == year){
// la première condition est pour le jour de base qui est sélectionner, la deuxième est si un jour est cliqué par utilisateur
day_elmt.classList.add('selected');
}
day_elmt.addEventListener('click', function(){ // Si utilisateur clique sur un jour
// on met à jour la date séléctionner qui permettra ajouter la class selected
selectedDay = day_elmt.textContent;
selectedMonth = month + 1;
selectedYear = year;
// On écrit la date, puis on la format en la passant à input
selectedDate = new Date (year + '-' + (month + 1) + '-' + (day_elmt.textContent));
input_date_elmt.value = formatDate(selectedDate); // on update la valeur de l'input
days_to_day();
});
}
}
En vous remerciant par avance de vos réponses,
Tekrai.