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)


3 commentaires pour “jQuery UI DatePicker : désactiver certains jours de la semaine”

  • Bonjour,
    Merci beaucoup pour votre astuce permettant de désactiver certaines dates ou mois dans datepicker.
    Auriez-vous un moyen pour que certains mois ne soient pas affichés, mon datepicker n’étant utilisable que 4 mois dans l’année. Cela éveterait des saisies erronées par manque d’inattention.
    Merci d’avance, et si non merci beaucoup pour le code ci-dessus
    Cordialement

  • Là tout de suite je ne vois pas d’option directe pour faire ça. Il faut peut-être passer par un traitement manuel avec l’évènement onChangeMonthYearType et forcer le passage au mois suivant si le mois en cours ne dois pas être sélectionné.

  • Bonjour,
    Merci pour votre réponse. Je poursuis mes recherches et vous tiens informé si je trouve quelque chose.

Laissez un commentaire