Validation d'un formulaire avec DatePicker

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:

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:

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:

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:

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