Validation d'un formulaire avec DatePicker

**photoMagique** · 10/07/2017, 13h29

Bonjour,

J'ai un formulaire avec plusieurs datepicker.

Ils s'affichent bien, je peux faire tout ce que je veux. Mais quand je veux valider mon formulaire, dès que la date est supérieure au 12 du mois, j'ai une erreur.

Voila les différents codes sources :

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
60
61
62
<script type="text/javascript">
    $(document).ready(function() {
        // Bouton des dates
            // Date de début
                $("#ReportageDateDebut").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    numberOfMonths: 1,
                    regional: "fr",
                    showOn: "both",//button
                    buttonText: ' Choisir la date ',
                    buttonImageOnly: false,
                    showAnim: "slideDown",
                    showTime: true,
                    dateFormat: "dd/mm/yy",
 
                    closeText: 'Fermer',
                    firstDay: 1,
                    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.',
                    showButtonPanel: true,
	            currentText: "Aujourd'hui",
 
                    onClose: function(selectedDate) {
                        $("#ReportageDateFin").datepicker("option", "minDate", selectedDate);
                        $('#ReportageDateFin').datepicker('setDate', selectedDate);
                    }
                });
            // Date de fin
                $("#ReportageDateFin").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    numberOfMonths: 1,
                    regional: "fr",
                    showOn: "both",//button
                    buttonText: ' Choisir la date ',
                    buttonImageOnly: false,
                    showAnim: "slideDown",
                    showTime: true,
                    dateFormat: "dd/mm/yy",
 
                    closeText: 'Fermer',
                    firstDay: 1,
                    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.',
                    showButtonPanel: true,
	            currentText: "Aujourd'hui"
                });

La validation :

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
 $(function() {
    // Setup form validation on the #register-form element
    $("#ReportageFormulaire").validate({
        // Specify the validation rules
        rules: {
            ReportageDateDebut: "required",            
            ReportageDateFin: "required",
            IPTC1: "required",
            IPTC2: "required",
            TypePhotographie: "required",
            CLUB: "required",
            COMPETITION: "required",
            JOURNEE: "required",
            ENCEINTES: "required",
            CarteJournaliste: "required",
            <?php
                if ( $_SESSION["UserProfil"] == 0 ) {
                    echo "SurAccreditation: \"required\",";
                    //echo "Photographe1: \"required\"";
                }
                else {
                    echo "SurAccreditation: \"required\"";
                }
            ?>
        },
        // Specify the validation error messages
        messages: {
            ReportageDateDebut: "Veuillez préciser la date de début",
            ReportageDateFin: "Veuillez préciser la date de fin",
            IPTC1: "Veuillez indiquer sur le sujet principal",
            IPTC2: "Veuillez préciser le sujet",
            TypePhotographie: "Veuillez préciser le type d'image réalisée",
            CLUB: "Veuillez préciser la société ou le club",
            COMPETITION: "Veuillez préciser le thème du reportage",
            JOURNEE: "Veuillez préciser le tpe d'évènement",
            ENCEINTES: "Veuillez préciser le lieu du reportage",
            CarteJournaliste: "Veuillez indiquer s'il faut la carte de journaliste",
            ENCEINTES: "Veuillez préciser le lieu du reportage",
            <?php
                if ( $_SESSION["UserProfil"] == 0 ) {
                    echo "SurAccreditation: \"Veuillez indiquer s'il faut faire une demande d'accréditation\",";
                    //echo "Photographe1: \"Veuillez indiquer le photographe principal\"";
                }
                else {
                    echo "SurAccreditation: \"Veuillez indiquer s'il faut faire une demande d'accréditation\"";
                }
            ?>
 
        },

Dans le formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<label>Début : </label><input type="date" id="ReportageDateDebut" name="ReportageDateDebut" size="10" maxlength="10" class="date start">
                                        <label> à </label><input type="text" id="ReportageHeureDebut" name="ReportageHeureDebut" size="5" maxlength="5" class="time start">
                                        <label>Fin : </label><input type="date" id="ReportageDateFin" name="ReportageDateFin" size="10" maxlength="10" class="date end">
                                        <label> à </label><input type="text" id="ReportageHeureFin" name="ReportageHeureFin" size="5" maxlength="5" class="time end">

Et les includes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <script type="text/javascript" src="../outils/jquery.js"></script>
        <script type="text/javascript" src="../outils/jquery.validate.js"></script>
        <script type="text/javascript" src="../outils/jquery-ui.js"></script>
        <script type="text/javascript" src="../outils/jquery.ui.datepicker-fr.js"></script>
        <script type="text/javascript" src="../outils/jquery.timepicker.js"></script>
        <script type="text/javascript" src="../outils/jquery.chained.js"></script>
 
		<script type="text/javascript" src='../outils/moment.min.js'></script>
		<script type="text/javascript" src='../outils/fullcalendar.min.js'></script>
		<script type="text/javascript" src='../outils/lang-all.js'></script>
 
        <script type="text/javascript" src="../outils/config.js"></script>
		<script type="text/javascript" src="../outils/skel.min.js"></script>
		<script type="text/javascript" src="../outils/skel-panels.min.js"></script>

J'ai bien recherché sur internet, mais ce matin je ne dois pas être en forme... :

https://github.com/plataformatec/sim...rm/issues/1091
https://www.google.fr/#q=jquery+date...%3E12&start=10

Pourriez m"aider ? Je vous remercie.

Eric

**numew** · 10/07/2017, 15h03

A première vu c'est un problème avec le format de la date sachant que c'est le nombre 12 qui bloque, il considère que c'est le numéro du mois et non celui du jour. Il faut chercher de ce coté la.

**photoMagique** · 10/07/2017, 15h42

Merci, c'est exactement cela.. j'ai commenté la ligne "dateFormat: "dd/mm/yy"," et tout fonctionne.

Merci pour votre aide.

Validation d'un formulaire avec DatePicker

jQuery

Discussions similaires

Partager

Partager