jsSimpleDatePickr calendrier Javascript

Calendrier Javascript gratuit

jsSimpleDatePickr est un sélecteur de date Javascript gratuit

• Simple et rapide
• Peut afficher plusieurs mois
• Capable de fonctionner sans librairie externe
• Interprête tous types de format de date
• Capable d'ajouter ou de soustraire des mois ou des années
• Stylisé entièrement en CSS
• Léger (10 316 octets non compressé, 6 746 compressé)
• Un objet Javascript (pas de variables ou de fonctions qui traînent)
• Testé sur Safari (5.1), Firefox (25.0), Internet Explorer (7, 8), Chrome (31)

Vous pouvez télécharger jsSimpleDatePickr seul et l'utiliser tel quel ou utiliser le configurateur.

Plus d'informations sur le blog.

Historique

24/11/2017

Correction d'une anomalie. Si vous utilisiez une fonction de callback, le calendrier renvoyait une date au format JJ/MM/AAAA, quelque que soit le paramètre dateMask. Dorénavant, il passe la date comme défini dans le mask.

calObj = new jsSimpleDatePickr();
calId = calObj.CalAdd({
	'divId': "calendarMain",
	'dateMask': 'AAAA-MM-JJ',
	'callBack': 'CalendarClic',
});
function CalendarClic(aDate){
	console.log(aDate); // AAAA-MM-JJ
}

12/01/2017

Correction d'un bug. Si hideOnClick était faux le calendrier n'était pas redessiné après un clic sur une date.

3/12/2016

Ajout des deux nouveaux paramètres :

• dateMask : définit le mask d'affichage de la date.
• dateCentury : définit le siècle d'affichage. Utile uniquement si vous utilisez des années à 2 chiffres.

dateMask est un texte dans lequel la fonction va chercher et JJ par le jour, MM par le mois et AA ou AAAA par l'année. Vous pouvez utiliser des mask de tous types :

• JJ/MM/AAAA : par défaut
• MM/JJ/AAAA : format US.
• AAAA-MM-JJ : format SQL.

dateCentury est un chiffre qui sera ajouté à l'année si vous utilisez des dates dont l'année est au format AA.

25/11/2016

Revue complète du code avant mise en ligne.
Correction de petit bug.

21/07/2016 : Version 2

- Fusion des fichiers javascript avec jsSimpleDatePickrInit.js et jsSimpleDatePickr.js. Avantage : Un constructeur, plus de variables qui traînent et qui risqueraient d'entrer en conflit avec d'autres variables globales.
- Passage au DOM pour la construction des éléments du calendrier.
- Les données d'initialisation sont passées dans un objet plutôt qu'une suite de variable :

calObj = new jsSimpleDatePickr();
calId = calObj.CalAdd({
	'divId': "calendarMain",
	'buttonTitle': 'Afficher / Masquer le calendrier',
	'callBack': 'MyFunction',
	'monthLst': {'01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'},
	'dayLst': {'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'},
});

• divId : identifiant du bloc <div> qui va contenir le(s) calendrier(s).
• buttonTitle : nom qui sera affiché sur le bouton pour afficher / masquer la calendrier (facultatif) (btName).
• inputFieldId : identifiant du champ dans lequel sera affiché la date (facultatif) (fieldId).
• callBack : fonction appellée après un clic sur une date (facultatif) (funcName).
• displayNumber : nombre de calendrier affiché.
• titleMask : masque d'affichage pour le titre.
• navType : type de navigation (00 - 01 - 11).
• classTable : class des <table>.
• classDay : class des <td>.
• classDaySelected : class du <td> qui contient la date sélectionnée.
• monthLst : nom des mois à l'affichage.
• dayLst : nom des jours à l'affichage (en commençant par le dimanche).
• hideOnClick : boolean qui indique si le calendrier est masqué après un clic sur une date. (constDisplay).
• showOnLaunch : boolean qui indique si le calendrier est affiché à l'initialisation.

28/01/2015

La fonction calInit masque le bloc div ajoutée dans la page.
Le contenu du champ fieldId est directement interpêté dans la fonction callInit().

25/01/2015

Ajout de la variable constDisplay à la fonction d'initialisation calInit. Cette variable permet de laisser la calendrier constamment affiché. Merci à Marc Paris.

31/10/2014

Correction d'un bug lors de la naviguation d'un mois à l'autre si la date en cours est le 31 du mois.

24/06/14

Suppresion de la variable jsSDPMonthName. chaque objet a ses propres nom de mois.
Fonction calInit : ajout de la variable monthLst.
Fonction calInit : ajout de la variable dayLst.

23/06/14

Fonction calInit, suppression de la classe .calendarWrap sur le bloc div qui contient des boutons de navigation, le titre, etc.
Fonction calInit, le nom du div qui contient le calendrier est sauvegardé dans le tableau me.jsSDPObj.

22/06/14

Fonction calInit, le champ fieldId devient facultatif.
Ajout des fonctions calShow() et calHide().