jQuery UI DatePicker : désactiver certains jours de la semaine

Posté par seiyar81 le 28 janvier 2014 | Laisser un commentaire (3)
jQuery UI DatePicker

jQuery UI propose bon nombre de widgets très utiles lorsqu’on développe des applications Web dynamiques.
Parmis ces derniers le DatePicker, ou calendrier, qui propose plusieurs options de configuration très précises.

Prenons par exemple le cas suivant : le client pour qui vous développez une application de réservation de restaurants vous informe que tous les réservations ne sont pas possibles les lundis et jeudis.

Et bien pas de problèmes, la fonction beforeShowDay permet de pré-filtrer chaque date et de définir si elle est sélectionnable ou pas.
Ce qui donne dans notre cas :


	jQuery(document).ready(function() {
		jQuery("#calendar").datepicker({
			beforeShowDay: function (date) {
				if (date.getDay() == 1 || date.getDay() == 4) { // La semaine commence à 0 = Dimanche
					return [false, ''];
				} else {
					return [true, ''];
				}
			}
		});
	});

Et voilà c’est tout simple.

On peut également utiliser la même méthode pour supprimer certaines semaines ou mois de l’année (vacances par exemple) :


	jQuery(document).ready(function() {
		jQuery("#calendar").datepicker({
			beforeShowDay: function (date) {
				if (date.getMonth() == 6 || date.getMonth() == 7) { // Mois Juillet et Août
					return [false, ''];
				} else {
					return [true, ''];
				}
			}
		});
	});

Si vous souhaitez par contre mettre une date minimum, utilisez plutôt l’option minDate :


	jQuery(document).ready(function() {
		jQuery("#calendar").datepicker({
			minDate: new Date(2014, 1 - 1, 1)
		});
	});

A vos claviers !

Catégorie: Développement Web, Javascript | Laisser un commentaire (3)