Bonjour à tous,
Nouveau dans le coins, je vous salue donc bien bas.
Bien que grand lecteur des tutos et autres cours de ce site, je n'ai jamais contribué sur le forum.
En cherchant une méthode d'autocomplétition de la date avec des slash, je suis tombé sur un post qui renvoyait à la v2 de ce calendrier et de fils en aiguilles sur la v3.
Alors Un grand bravo au Chomeur pour cette réalisation, ça déchire son doudou.
Je me suis trouvé confronté au quelques bug des uns et des autres et j'ai fini par mettre les mains dedans. Je n'ai pas compris un broc de la façon de construire le calendrier mais les calcules de date et le formatage, je m'en suis sortis. En plus je suis une grosse tanche en JS. Enfin c'est en forgeant ...
Je précise que j'ai testé ça en local sur un MAC avec OSX Lion Server sur Safari (5.1.2) et Firefox (8.0.1)
1) Problème de la date actuelle: 20/01/2012 au lieu de 20/12/2011
Dans les fonctions miseAjourHeader
Il y a à la 7ème ligne de code :
newtext = document.createTextNode(mCalendar.moisNom[(mCalendar.mois == 13) ? 0:mCalendar.mois-1]);
Remplacer par:
newtext = document.createTextNode(mCalendar.moisNom[(mCalendar.mois > 12) ? 0:mCalendar.mois-1]);
Et dans le doute, j'ai fait pareil dans la fonction assemblyHeader
à la 6ème ligne de code :
newtext = document.createTextNode(mCalendar.moisNom[(mCalendar.mois == 12) ? 0:mCalendar.mois-1]);
Remplacer par :
newtext = document.createTextNode(mCalendar.moisNom[(mCalendar.mois > 12) ? 0:mCalendar.mois-1]);
2) problème de l'affichage à 2 chiffre des jours et mois inférieurs à 10
Dans la fonction pickDate
la méthode de SpaceFrog ne fonctionnant pas, (JS considère la variable comme un entier et non comme une chaine du coup impossible d'avoir sa longueur), j'ai transformé la mesure de longueur en mesure de valeur. ce qui nous donne les 2 lignes suivante à ajouter après
mCalendar.jour = parseInt(elementClick.innerHTML);
1 2 3
| mCalendar.jour = (mCalendar.jour < 10) ? '0'+mCalendar.jour : mCalendar.jour;
mCalendar.mois = (mCalendar.mois < 10) ? '0'+mCalendar.mois : mCalendar.mois; |
3) problème avec la valeur de certains mois: 08 et 09
Après avoir fait la modification précédente, j'avais des bugs sur la lecture de la valeur de certains mois. 08 et 09 n'étaient pas correctement lu et me renvoyait à la date du jour.
En fouillant et en bricollant un peu, j'ai corrigé le problème en spécifiant la base de travail à la l'instruction parseInt de JS dans la fonction getCurrentDate
Il faut peut être le faire à chaque utilisation de parseInt. Je l'ai fait aussi pour la valeur du jour.
J'ai donc remplacé :
1 2 3 4
| //Récupération du mois / jour année
mCalendar.annee = parseInt(dateExplode[2]);
mCalendar.jour = (mCalendar.formatDate == "FR") ? parseInt(dateExplode[0]):parseInt(dateExplode[1]);
mCalendar.mois = (mCalendar.formatDate == "FR") ? parseInt(dateExplode[1]):parseInt(dateExplode[0]); |
par :
1 2 3 4
| //Récupération du mois / jour année
mCalendar.annee = parseInt(dateExplode[2], 10);
mCalendar.jour = (mCalendar.formatDate == "FR") ? parseInt(dateExplode[0],10):parseInt(dateExplode[1],10);
mCalendar.mois = (mCalendar.formatDate == "FR") ? parseInt(dateExplode[1],10):parseInt(dateExplode[0],10); |
4) le 29/02/2012
Le calendrier n'en voulait pas. La raison, la correction automatique de la date par JS comme habilement indiqué dans les commentaire. Sans ce commentaire je n'aurais jamais trouvé je pense.
Ca se passe dans getCurrentDate quand on construit testDate, On ajoute le jour puis le mois puis l'année or au moment de l'ajout du mois, JS doit considérer qu'il est à l'année courante (2011) du coup il corrige 29/02/2011 en 01/03/2011 sauf qu'il s'est gouré d'année. La solution est très simple : inverser l'ordre de création de la date en commençant par l'année puis le mois puis le jour.
J'ai donc remplacé :
1 2 3 4 5
| //On créer une nouvelle date avec les paramètres d'entrée pour tester sa validité
testDate = new Date();
testDate.setDate(mCalendar.jour);
testDate.setMonth(mCalendar.mois-1);
testDate.setFullYear(mCalendar.annee); |
par:
1 2 3 4 5
| //On créer une nouvelle date avec les paramètres d'entrée pour tester sa validité
testDate = new Date();
testDate.setFullYear(mCalendar.annee);
testDate.setMonth(mCalendar.mois-1);
testDate.setDate(mCalendar.jour); |
5) Les listes mois et années qui disparaissent quand on veut aller dessus.
Soit vous êtes très rapides et ça marche
Soit il faut aller voir du coté de la feuille de style comme indiqué par Vodiem sachant que les valeur qu'il a donné ne conviennent pas pour moi. J'ai du réduire encore un peu.
dans .mCalandarMain .mCalandarheader .mInfo .mois :
top:14px;
dans .mCalandarMain .mCalandarheader .mInfo .annee :
top:14px;
J'ai du mettre 12px à chaque fois.
Voilà toutes les correction que j'ai faites. Si j'en trouve d'autres, je reviendrais par ici
Ha quand même, voici la version avec les corrections.
calendar_v3.zip
Et bien sur, bonnes fêtes de fin d'année à tous si je ne repasse pas
Partager