source: spip-zone/_plugins_/orr/formulaires/reserv.html @ 63488

Last change on this file since 63488 was 63488, checked in by tofulm@…, 8 years ago

prise en compte de l'heure dans l'affichage automatique de la date de fin

File size: 5.5 KB
Line 
1<div class="formulaire_spip formulaire_#FORM">
2
3    [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
4    [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
5
6    [(#ENV{editable}|oui)
7    <form name="formulaire_#FORM" action="#ENV{action}" method="post"><div>
8
9            #ACTION_FORMULAIRE{#ENV{action}}
10            <ul>
11                <li class="editer_nom_ressource obligatoire[ (#ENV**{erreurs}|table_valeur{message}|oui)erreur]">
12                <label for="champ_nom_ressource"><:nom_ressource:></label>
13                [<span class='erreur_message'>(#ENV**{erreurs}|table_valeur{message})</span>]
14                <input type="text" id="champ_nom_ressource" name="nom_reservation" value="" />
15                <span class="error-message"></span>
16                </li>
17
18                <li class="editer_date_debut obligatoire[ (#ENV**{erreurs}|table_valeur{message}|oui)erreur]">
19                <label for="date_debut"><:date_de_debut:></label>
20                [<span class='erreur_message'>(#ENV**{erreurs}|table_valeur{message})</span>]
21                <input type="text" id="date_debut" class="datepicker" name="date_debut" value="[(#ENV{date_debut})]" />
22                <span class="error-message"></span>
23                </li>
24
25                <li class="editer_date_fin obligatoire[ (#ENV**{erreurs}|table_valeur{message}|oui)erreur]">
26                <label for="date_fin"><:date_de_fin:></label>
27                [<span class='erreur_message'>(#ENV**{erreurs}|table_valeur{message})</span>]
28                <input type="text" id="date_fin" class="datepicker" name="date_fin" value="[(#ENV{date_fin})]" />
29                <span class="error-message"></span>
30                </li>
31            </ul>
32            <p class="boutons"> <input type="submit" id="envoyer" class="submit" value="<:bouton_enregistrer:>" />
33            </p>
34    </div></form>
35    ]
36</div>
37
38<script>
39    $(function(){
40        var datepickers = $('.datepicker').datetimepicker({
41            timeFormat: 'hh:mm:ss',
42            stepHour: 1,
43            stepMinute: 15,
44            minuteGrid:15,
45            hourGrid:4,
46                                onClose: function(dateText, inst) {
47                                        var endDateTextBox = $('#date_fin');
48                                        if (endDateTextBox.val() != '') {
49                                                var testStartDate = new Date(dateText);
50                                                var testEndDate = new Date(endDateTextBox.val());
51                                                if (testStartDate > testEndDate)
52                                                endDateTextBox.val(dateText);
53                                        }
54                                        else {
55                                        endDateTextBox.val(dateText);
56                                        }
57                                },
58                                onSelect: function (selectedDateTime){
59                                        var start = $(this).datetimepicker('getDate');
60                                        $('#date_fin').datetimepicker('option', 'minDate', new Date(start.getTime()));
61                                }
62            });
63            $('#date_fin').datetimepicker({
64                                onClose: function(dateText, inst) {
65                                        var startDateTextBox = $('#date_debut');
66                                        if (startDateTextBox.val() != '') {
67                                                var testStartDate = new Date(startDateTextBox.val());
68                                                var testEndDate = new Date(dateText);
69                                                if (testStartDate > testEndDate)
70                                                        startDateTextBox.val(dateText);
71                                        }
72                                        else {
73                                                startDateTextBox.val(dateText);
74                                        }
75                                },
76                                onSelect: function (selectedDateTime){
77                                        var end = $(this).datetimepicker('getDate');
78                                        $('#date_debut').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
79                                }
80            });
81        // action de controle du formulaire lorsque l'on clique sur le bouton envoyé
82        $('#envoyer').click(function(){
83            var valid     = true;
84            var datedebut = $("#date_debut").val();
85            var datefin   = $("#date_fin").val();
86            // Les verifications :
87            // Pour le champ nom, vérifie sa présence
88            if ($("#champ_nom_ressource").val() == ""){
89                $("#champ_nom_ressource").css("border-color","#FF0000");
90                $("#champ_nom_ressource").next(".error-message").css("color","#FF0000").html("X  Il faut remplir ce champ !!");
91                valid = false;
92            }
93            else{
94                $("#champ_nom_ressource").css("border-color","#04F935");
95                $("#champ_nom_ressource").next(".error-message").html("");
96
97            }
98            // Pour le champ date_debut, vérifie sa présence
99            if ($("#date_debut").val() == ""){
100                $("#date_debut").css("border-color","#FF0000");
101                $("#date_debut").next(".error-message").css("color","#FF0000").html("X  Il faut remplir ce champ !!");
102                valid = false;
103            }
104            else{
105                $("#date_debut").css("border-color","#04F935");
106                $("#date_debut").next(".error-message").html("");
107
108            }
109            // Pour le champ date_fin, vérifie sa présence
110            if ($("#date_fin").val() == ""){
111                $("#date_fin").css("border-color","#FF0000");
112                $("#date_fin").next(".error-message").css("color","#FF0000").html("X  Il faut remplir ce champ !!");
113                valid = false;
114            }
115            else{
116                // vérifie que date_fin soit postérieur à date_debut
117                if (datedebut > datefin){
118                    $("#date_fin").css("border-color","#FF0000");
119                    $("#date_fin").next(".error-message").css("color","#FF0000").html("X mauvaise date !!");
120                    valid = false;
121                }
122                else{
123                    $("#date_fin").css("border-color","#04F935");
124                    $("#date_fin").next(".error-message").html("");
125                }
126            }
127            return valid;
128        });
129    });
130</script>
Note: See TracBrowser for help on using the repository browser.