Bibliothèque de controles

Voici un plugin jQuery s'appuyant sur les librairies daterangepicker.jQuery.js et ui.datepicker. Il permet de réaliser un sélecteur de dates.

Les scripts + les images

SelecteurPlageDeDates_V1.0.0.zip

Exemple

$(function(){						  
	    $('#datedeb, #datefin').daterangepicker(
		{   dateFormat :'dd/mm/yy', presetRanges: [], presets: {allDatesAfter: 'Une seule date de début', 
			allDatesBefore: 'Une seule date de fin', dateRange: 'Une plage de dates'}, rangeStartTitle:'Date de début', 
			rangeEndTitle:'Date de fin', doneButtonText:'Fermer', earliestDate:Date.parse('01/01/2009'), latestDate:Date.parse('12/31/2009'),
			onClose:onClose, onOpen:onOpen, onChange:onChange
		});	   				         
	});

Les options

#datedeb : id de l'élément 'input' correspondant à la première date
#datefin : id de l'élément 'input' correspondant à la deuxième date
presetRanges :tableau de plage(s) prédéfinie(s) (à venir). Pour ne pas en définir, utiliser presetRanges:[]
presets : fonctions natives du composant ('specificDate', 'allDatesBefore', 'allDatesAfter' et/ou 'dateRange')
rangeStartTitle : titre situé au dessus du sélecteur de la date de début
rangeEndTitle : titre situé au dessus du sélecteur de la date de fin
doneButtonText : texte du bouton 'fermer'
earliestDate : date sélectionnée au plus tôt (utilisé lors de la sélection d'une date de fin uniquement)
latestDate : date sélectionnée au plus tard (utilisé lors de la sélection d'une date de début uniquement)
onClose : fonction executée à la fermeture du contrôle
onOpen : fonction executée à l'ouverture du contrôle
onChange : fonction executée lors du changement d'une des dates

Comment faire...

...obtenir la plage de date

$(function(){						  
        $('#datedeb, #datefin').daterangepicker(
        {   dateFormat :'dd/mm/yy', presetRanges: [], presets: {allDatesAfter: 'Une seule date de début', 
            allDatesBefore: 'Une seule date de fin', dateRange: 'Une plage de dates'},
            rangeStartTitle:'Date de début', rangeEndTitle:'Date de fin', doneButtonText:'Fermer', 
            earliestDate:Date.parse('01/01/2009'), latestDate:Date.parse('12/31/2009'),
            onClose:onClose, onOpen:onOpen, onChange:onChange
        });
    });
    
function onClose(){alert($('#datedeb').val() + ' - ' + $('#datefin').val());}
function onOpen(){alert($('#datedeb').val() + ' - ' + $('#datefin').val());}			 
function onChange(){alert($('#datedeb').val() + ' - ' + $('#datefin').val());}