UI Datepicker et date actuelle

Version imprimable

Salut tout le monde !! :salut:

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 !!!!! :ccool::ccool:

Pour info voila mon code actuel :

Code:

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

:merci:

Code:

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

25/08/2010, 08h37
cyrux

Merci de ta réponse Gael !! :ccool::ccool:

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

désolé je débute ... :oops:

:merci: Beaucoup !!
25/08/2010, 09h56
cyrux

Résolu !

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

:bravo::king: UN ENORME MERCI A TOI !!!!!! :mouarf1::ave:

Problème :resolu: !!!
25/08/2010, 09h58
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 !!!:ccool:
25/08/2010, 10h19
gael
Code:

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

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

Code:

$("#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:

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:

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:

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.
25/08/2010, 14h28
cyrux

Héhé !!
Merci beaucoup, je comprend la démarche :ccool: !!!
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 ...

:koi: une idée ??

:merci: encore !!
25/08/2010, 14h41
gael
Code:

$("#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:

$.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:

1 2 <script type="text/javascript" src="http://jqueryui.com/ui/i18n/jquery.ui.datepicker-fr.js"></script>
25/08/2010, 15h07
cyrux
Merci en effet, le -1 permet de tout faire fonctionner correctement !!! :ccool::ccool:

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

ces lignes :
Code:

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 !!! :king:
25/08/2010, 15h11
gael

Il n'ajoute pas un mois mais un jour, parce que l'emplacement des jours et des mois est inversé
25/08/2010, 15h12
gael

Citation:

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)
25/08/2010, 15h16
cyrux

et je les place simplement comme sa dans mon fichier .js ???
:koi: g pas du tout saisir la ...
25/08/2010, 15h20
gael

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

fonction minDate dans datepicker

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:

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 ?

23/09/2010, 13h16
gael

A la place de

Code:

minDate: new Date(y, m, d),

j'aurais mis :

Code:

minDate: new Date(),

mais j'ai rien testé
23/09/2010, 16h42
hellsingblack

Citation:

Envoyé par gael

A la place de

Code:

minDate: new Date(y, m, d),

j'aurais mis :

Code:

minDate: new Date(),

mais j'ai rien testé

J'ai déjà tester mais j'ai l'impression qu'on utilise pas les même version et pourtant la minDate et dans chaque date picker