Table des matières

Datepicker

Installation

Utiliser jqueryUI et le fichier jquery.ui.datepicker-fr.js pour avoir les dates en français

jquery.ui.datepicker-fr.js
/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au),
			  Stéphane Nahmani (sholby@sholby.net),
			  Stéphane Raimbault <stephane.raimbault@gmail.com> */
jQuery(function($){
	$.datepicker.regional['fr'] = {
		closeText: 'Fermer',
		prevText: 'Précédent',
		nextText: 'Suivant',
		currentText: 'Aujourd\'hui',
		monthNames: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
			'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
		monthNamesShort: ['janv.', 'févr.', 'mars', 'avril', 'mai', 'juin',
			'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'],
		dayNames: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
		dayNamesShort: ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
		dayNamesMin: ['D','L','M','M','J','V','S'],
		weekHeader: 'Sem.',
		dateFormat: 'dd/mm/yy',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: ''};
	$.datepicker.setDefaults($.datepicker.regional['fr']);
});

Ensuite mettez un champ texte

<input type="text" id="date" name="date" value="<?=date('d-m-Y')?>">

Et le code jquery qui va bien

$( "#date" ).datepicker({
  dateFormat: "dd-mm-yy",
  changeMonth: true,
  changeYear: true,
  showOtherMonths: true,
  selectOtherMonths: true,
  onSelect: function(date){
    location.href='?date='+date;
  }
});

Dans cet exemple, on change de page lorsque l’on sélectionne une date en passant la valeur de date dans l’url

exemple pour gérer des dates

	$('#camera_next').click(function(){
		if($('#heure option:selected').next().val()==undefined){
			heure='0300';
			date_photo=$( "#date_photo" ).datepicker('getDate');
			jour=$.datepicker.formatDate( "yymmdd", new Date(date_photo.getFullYear(), date_photo.getMonth(), date_photo.getDate()+1 ) );
 
			$("#date_photo").datepicker('setDate',$.datepicker.formatDate( "dd/mm/yy", new Date(date_photo.getFullYear(), date_photo.getMonth(), date_photo.getDate()+1 ) ) );
			$("#heure").val(heure);
		}else{
			d=$('#date_photo').val();
			jour=d.substr(6,4)+d.substr(3,2)+d.substr(0,2);
			heure=$('#heure option:selected').next().val();
 
			$("#heure").val(heure);			
		}
		$('#photoreel').attr('src','http://transalpair.eu/smm/photos/Pict_'+jour+'_'+heure+'.jpg');
		$('#photolien').attr('href','http://transalpair.eu/smm/photos/Pict_'+jour+'_'+heure+'.jpg');
	});
 
	$('#camera_prev').click(function(){
		if($('#heure option:selected').prev().val()==undefined){
			heure='2100';
			date_photo=$( "#date_photo" ).datepicker('getDate');
			jour=$.datepicker.formatDate( "yymmdd", new Date(date_photo.getFullYear(), date_photo.getMonth(), date_photo.getDate()-1 ) );
 
			$("#date_photo").datepicker('setDate',$.datepicker.formatDate( "dd/mm/yy", new Date(date_photo.getFullYear(), date_photo.getMonth(), date_photo.getDate()-1 ) ) );
			$("#heure").val(heure);
		}else{
			d=$('#date_photo').val();
			jour=d.substr(6,4)+d.substr(3,2)+d.substr(0,2);
			heure=$('#heure option:selected').prev().val();
 
			$("#heure").val(heure);			
		}
		$('#photoreel').attr('src','http://transalpair.eu/smm/photos/Pict_'+jour+'_'+heure+'.jpg');
		$('#photolien').attr('href','http://transalpair.eu/smm/photos/Pict_'+jour+'_'+heure+'.jpg');
	});