Discussion :

[cyrux]

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ût','Sep','Oct','Nov','Déc']
	    		, monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre']
	    		, prevText: 'Précé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ût','Sep','Oct','Nov','Déc']
	    		, monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre']
	    		, prevText: 'Précédent'
	    		, nextText: 'Suivant'
				, closeText: 'OK'
	    		, currentText: "Aujour'dhui"	
	    		});			
 
 
}); //EOf:: DOM isReady

[gael]

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]

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]

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

UN ENORME MERCI A TOI !!!!!!

Problème !!!

[cyrux]

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]

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.