UI Datepicker et date actuelle

**cyrux** · 24/08/2010, 17h04

Salut tout le monde !!

Voici mon "problème" :
info : j'utilise zend framework

j'ai 2 datepicker dans la même page.
une pour de début une pour de fin

J'ai 2 questions :
1- Comment faire pour que l'on ne puisse pas selectionner une date inférieure à celle du jour ??

2- Comment faire pour que l'on ne puisse pas, dans le datepicker de fin, selectionner une date inférieure à celle insérée dans le date picker de début ??

MERCI BEAUCOUP !!!!!

Pour info voila mon code actuel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
// sur chargement du document DOM termniné (soit notre page HTML) 
$(document).ready(function() {
 
 $("#date_depart").datepicker(
	    		{	
	    		  showButtonPanel: true
	    		, dateFormat: 'dd/mm/yy'
	    		, dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']     			
	    		, dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
	    		, monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jun','Jul','Ao&ucirc;t','Sep','Oct','Nov','Déc']
	    		, monthNames: ['Janvier','F&eacute;vrier','Mars','Avril','Mai','Juin','Juillet','Ao&ucirc;t','Septembre','Octobre','Novembre','D&eacute;cembre']
	    		, prevText: 'Pr&eacute;c&eacute;dent'
	    		, nextText: 'Suivant'
				, closeText: 'OK'
	    		, currentText: "Aujour'dhui"	
	    		});
 
	$("#date_fin").datepicker(
	    		{	
	    		  showButtonPanel: true
	    		, dateFormat: 'dd/mm/yy'
	    		, dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']     			
	    		, dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
	    		, monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jun','Jul','Ao&ucirc;t','Sep','Oct','Nov','Déc']
	    		, monthNames: ['Janvier','F&eacute;vrier','Mars','Avril','Mai','Juin','Juillet','Ao&ucirc;t','Septembre','Octobre','Novembre','D&eacute;cembre']
	    		, prevText: 'Pr&eacute;c&eacute;dent'
	    		, nextText: 'Suivant'
				, closeText: 'OK'
	    		, currentText: "Aujour'dhui"	
	    		});			
 
 
}); //EOf:: DOM isReady

**gael** · 24/08/2010, 19h38

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$("#date_dbt").datepicker({minDate:new Date()});
ou					
$("#date_dbt").datepicker('option','minDate',new Date() );
 
$('#date_dbt').change(function(){
	date_dbt= $(this).attr('value').split('/');
	$("#date_fin").datepicker( 'option' , 'minDate' , new Date(date_dbt[2],date_dbt[1],date_dbt[0]) );
}

en supposant que tu utilises le datepicker de jqueryui.com

**cyrux** · 25/08/2010, 08h37

Merci de ta réponse Gael !!

Mais une question, ou dois-je placer ce code ??
juste après ? comment l'appeler ???

désolé je débute ...

Beaucoup !!

**cyrux** · 25/08/2010, 09h56

Je retire ce que j'ai demandé au dessus ... Rien de bien compliqué !!

UN ENORME MERCI A TOI !!!!!!

Problème

!!!

**cyrux** · 25/08/2010, 09h58

Au risque d'être embêtant, pourrais tu expliquer ton code s'il te plait ??
je n'aime pas me servir de choses que je ne comprends pas !!

Merci encore !!!

**gael** · 25/08/2010, 10h19

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#date_dbt").datepicker({minDate:new Date()});

l'option de définition de la date minimum est définie dans le constructeur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#date_dbt").datepicker('option','minDate',new Date() );

l'option de définition de la date minimum est définie après. Cette syntaxe peut être utile si tu ne connais pas encore la date minimum ( par exemple pour la date de fin)

new Date() sans argument retourne la date du jour.
http://javascript.developpez.com/faq/?page=date

plus d'infos sur l'option minDate du datepicker:
http://jqueryui.com/demos/datepicker/#option-minDate

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$('#date_dbt').change(function(){
	date_dbt= $(this).attr('value').split('/');
	$("#date_fin").datepicker( 'option' , 'minDate' , new Date(date_dbt[2],date_dbt[1],date_dbt[0]) );
}

Ici, on indique que lorsque la date de début est modifiée ( évennement intercepté par la méthode change de jquery ), il faut redéfinir la date minimum de fin.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

date_dbt= $(this).attr('value').split('/');

Pour ce faire, il faut aller chercher la date de début. Pour récupérer l'année, le jour, le mois, j'ai fait un split de la date.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
	$("#date_fin").datepicker( 'option' , 'minDate' , new Date(date_dbt[2],date_dbt[1],date_dbt[0])

et spécifier que cette date est la date minimum pour la fin.

**cyrux** · 25/08/2010, 14h28

Héhé !!
Merci beaucoup, je comprend la démarche

!!!
par contre, je rencontre un soucis, je m'explique :
dans mon premier datepicker je selectionne par exemple :
le 27/08/2010

la date minimum de mon deuxième datepicker devrait être
27/08/2010

mais le problème c'est que la date minimum qui m'est proposée est le
27/09/2010,

soit un mois après ...
si l'on en suit ton code, le raisonement est plus que correct, et ne peut retourner aucune erreur ... bizarre ...

une idée ??

encore !!

**gael** · 25/08/2010, 14h41

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#date_fin").datepicker( 'option' , 'minDate' , new Date(date_dbt[2],date_dbt[1]-1,date_dbt[0])

J'avais en fait un -1 que j'ai enlevé... Le comportement par défaut doit etre de considérer que le minimum est strict et donc non inclut dans les dates autorisées.

Et comme le format de date est par défaut Mois/Jour/Année (format us), ça ajoute un mois dans le format français.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	$.datepicker.setDefaults($.datepicker.regional['fr']));

Ces lignes permettent de régionaliser le datepicker (intitulés des mois, jour,...)
mais il faut alors importer le script:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
	<script type="text/javascript" src="http://jqueryui.com/ui/i18n/jquery.ui.datepicker-fr.js"></script>

**cyrux** · 25/08/2010, 15h07

Merci en effet, le -1 permet de tout faire fonctionner correctement !!!

chose que je n'ai pas bien compris ...
Pourquoi le format us rajoute il un mois ??

ces lignes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$.datepicker.setDefaults($.datepicker.regional['fr']));
<script type="text/javascript" src="http://jqueryui.com/ui/i18n/jquery.ui.datepicker-fr.js"></script>

sont elles obligatoires ??
(je n'ai que 4 datepicker à gérer, 2 début, 2 fin ...)

Mille merci !!!

**gael** · 25/08/2010, 15h11

Il n'ajoute pas un mois mais un jour, parce que l'emplacement des jours et des mois est inversé

**gael** · 25/08/2010, 15h12

ces lignes :
Code :
$.datepicker.setDefaults($.datepicker.regional['fr']));
<script type="text/javascript" src="http://jqueryui.com/ui/i18n/jquery.ui.datepicker-fr.js"></script>
sont elles obligatoires ??
(je n'ai que 4 datepicker à gérer, 2 début, 2 fin ...)

Elles ne sont pas obligatoires mais te permettent d'avoir une interface en français. D'ailleurs il faut importer la librairie avant d'initialiser le datepicker ( donc inverser l'ordre des deux lignes)

**cyrux** · 25/08/2010, 15h16

et je les place simplement comme sa dans mon fichier .js ???

g pas du tout saisir la ...

**gael** · 25/08/2010, 15h20

Après l'import de jquery et du plugin datepicker et avant l'utilisation du datapicker.

**hellsingblack** · 23/09/2010, 13h12

Bonjour,

je voudrais savoir d'ou sa peut venir dans la fonction minDate ne s'exécute pas ?

je m'explique, voici juste le bout de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// get the current date
			var date = new Date();
			var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
 
			// Disable all dates till today
			$('#datepicker2').datepicker({
					minDate: new Date(y, m, d),
					dateFormat: 'mm-dd-yy',});

j'ai deux datepicker début et fin, même si il y a la fonction minDate, les date avant celle d'aujourd'hui ne sont pas grisé et on peut les coché.

sur une page simple sa marche : http://articles.tutorboy.com/content...fied_dates.php

ce qui m'interresse est Disable all dates till today:

je fais exactement la même chose dans l'exemple, penser à un problème de fichier ? ou de syntaxe ?