Discussion :

[darkGAE]

Bonjour, je réalise un formulaire dont les 2 premiers champs sont des dates,
donc j'utilise des champs de textes complétés de datepicker.
ça marche parfaitement, le premier c'est la date du début et l'autre de fin,

j'aimerais si possible faire que le deuxième champ ne devienne actif que quand le
premier est rempli et que sa date minimum soit celle du champ précédent.

Voici 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
 
$.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: '',
    minDate: new Date()
 
};
$.datepicker.setDefaults($.datepicker.regional['fr']);
 
$(document).ready(function(){
    $("#form_date_from").datepicker();
 
    $("#form_date_to").datepicker();

J'aimerai que le deuxième champ réagit dès que le premier change

[darkGAE]

c'est bon j'ai trouvé la solution

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
$.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: '',
    minDate: new Date()
};
 
 
$.datepicker.setDefaults($.datepicker.regional['fr']);
function synchronize_dateFrom_with_dateTo(dateFrom, dateTo) {
    dateTo.datepicker("destroy");
    //efface le contenu du second champ
    dateTo.val("");
    dateTo.show();
    dateTo.attr("disabled",false);
    dateTo.datepicker({
        minDate: dateFrom.datepicker("getDate")
    });
}
$(document).ready(function(){
 
    $("#form_date_from").datepicker();
    $("#form_date_to").datepicker();
    $("#form_date_from").change(
    function(){
        synchronize_dateFrom_with_dateTo($("#form_date_from"),$("#form_date_to"));
    }  // ou alors cash en fonction anonyme
 
//        function(){
//            //obligé de détruire pour que ça soit mis à jour à CHAQUE changement
//            $("#form_date_to").datepicker("destroy");
//            efface le contenu du second champ
//            $("#form_date_to").val("");
//            $("#form_date_to").show();
//            $("#form_date_to").attr("disabled",false);
//            $("#form_date_to").datepicker({
//                minDate: $("#form_date_from").datepicker("getDate")
//            });
//        }
        );
    //END
    $("#form_date_to").hide();
    $("#form_date_to").attr("disabled",true);
 
}
)