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

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

Changement complet de l'affichage :
-> le calendrier centre automatiquement le jour demandé (il ne commence plus forcement par lundi).
-> Ajout de 3 icônes : jour précédent, suivant, aujourd’hui

File size: 6.1 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        $('.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            var data = { madate : datedebut };
87
88            // Les verifications :
89            // Pour le champ nom, vérifie sa présence
90            if ($("#champ_nom_ressource").val() == ""){
91                $("#champ_nom_ressource").css("border-color","#FF0000");
92                $("#champ_nom_ressource").next(".error-message").css("color","#FF0000").html("X  Il faut remplir ce champ !!");
93                valid = false;
94            }
95            else{
96                $("#champ_nom_ressource").css("border-color","#04F935");
97                $("#champ_nom_ressource").next(".error-message").html("");
98
99            }
100            // Pour le champ date_debut, vérifie sa présence
101            if ($("#date_debut").val() == ""){
102                $("#date_debut").css("border-color","#FF0000");
103                $("#date_debut").next(".error-message").css("color","#FF0000").html("X  Il faut remplir ce champ !!");
104                valid = false;
105            }
106            else{
107                $("#date_debut").css("border-color","#04F935");
108                $("#date_debut").next(".error-message").html("");
109
110            }
111            // Pour le champ date_fin, vérifie sa présence
112            if ($("#date_fin").val() == ""){
113                $("#date_fin").css("border-color","#FF0000");
114                $("#date_fin").next(".error-message").css("color","#FF0000").html("X  Il faut remplir ce champ !!");
115                valid = false;
116            }
117            else{
118                // vérifie que date_fin soit postérieur à date_debut
119                if (datedebut >= datefin){
120                    $("#date_fin").css("border-color","#FF0000");
121                    $("#date_fin").next(".error-message").css("color","#FF0000").html("X mauvaise date !!");
122                    valid = false;
123                }
124                else{
125                    $("#date_fin").css("border-color","#04F935");
126                    $("#date_fin").next(".error-message").html("");
127                }
128            }
129            //~ jQuery.ajax ({
130                    //~ url : "http://localhost/spip/plugins/fabrique_auto/orr/action_reserv.php",
131                    //~ data : data,
132                    //~ complete : function (xhr, result)
133                    //~ {
134                        //~ if (result != "success")
135                        //~ {
136                                                //~ alert("perdu");
137                        //~ return;
138                                                //~ }
139                        //~ var response = xhr.responseText;
140                        //~ alert(response);
141                        //~ valid=false;
142                    //~ }
143            //~ });
144            //~ valid=false;
145            return valid;
146        });
147    });
148</script>
Note: See TracBrowser for help on using the repository browser.