[datepicker] Date de fin non active

**laurentSc** · 26/04/2019, 22h30

Bonsoir,

mon code permet de renseigner une date de début et une date de fin. J'ai donc 2 champs Datepicker. Le premier fonctionne mais pas le second (quand on clique dessus, pas de calendrier). Pourtant les 2 codes sont similaires; Qu'est-ce qui ne va pas ?

Code html :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<head>
…
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<link rel="stylesheet" href="/resources/demos/style.css">
  <link href="<?php echo SITE_URL_HTTP; ?>/css/bootstrap.css" rel="stylesheet"/> <!-- après le css de bootstrap -->
</head>
<body>
…
 
<table>
    <tr>
	<td><?php echo $str[302];?> : </td>
	<td> 
	<input type="text" class="form-control datepicker" id="datepickerd" name="datepickerd" placeholder="<?php echo $str[361];?>">	
	</td>
    <td><?php echo $str[313];?></td></tr>
 
    <tr>
	<td><?php echo $str[303];?> : </td>
	<td> 
	<input type="text" class="form-control datepicker" id="datepickerf" name="datepickerf" placeholder="<?php echo $str[361];?>">	
	</td>
	<td><?php echo $str[313];?></td></tr>
</table>
 
 
<script>
    $(document).ready(function(){ // signifie : QUAND LE DOM EST PRET (= APRES chargement de la page)
        $('#datepickerd').datepicker({ 
            dateFormat: 'dd-mm-yy', firstDay:1, minDate: new Date(),
            onSelect: function() {
                if( $('#datepickerf').val() == '' )
                {
                    $('#datepickerf').val( $(this).val() );
                }
            },
 
            changeMonth: true,
 
            changeYear: true            
            });
    });
</script>
 
<?php if ($lang=='fr'){ ?>
        <script>
                    (function($){
                    $.fn.datepicker.dates['fr'] = {
                    days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
                    daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
                    daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
                    months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
                    monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
                    today: "Aujourd'hui",
                    monthsTitle: "Mois",
                    clear: "Effacer",
                    weekStart: 1,
                    format: "dd/mm/yyyy"
                    };
                    }(jQuery));
    
    
    
                    $('.datepicker').datepicker({
                    language: 'fr',
                    autoclose: true,
                    todayHighlight: true
                    })
        </script>
            <?php }
            else {
            ?>
        <script>
                    (function($){
                    $.fn.datepicker.dates['en'] = {
                    days: ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"],
                    daysShort: ["sun.", "mon.", "tue.", "wed.", "thu.", "fri.", "sat."],
                    daysMin: ["su", "m", "tu", "w", "th", "f", "sa"],
                    months: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"],
                    monthsShort: ["jan.", "feb.", "mar.", "apr.", "may", "june", "july", "aug.", "sept.", "oct.", "nov.", "dec."],
                    today: "Today",
                    monthsTitle: "Month",
                    clear: "Clear",
                    weekStart: 1,
                    format: "mm/dd/yyyy"
                    };
                    }(jQuery));
 
 
                    $('.datepicker').datepicker({
                    language: 'en',
                    autoclose: true,
                    todayHighlight: true
                    })
        </script>
            <?php
            } ?>

Quand j'ai écrit ce code, je ne savais pas encore qu'on ne fait plus de mise en page avec <table> et j'ai pas envie de toucher à cette partie du code qui fonctionne.

Manque-t-il une déclaration de js ?

Invité · 27/04/2019, 10h11

Bonjour Laurent,

le problème, c'est que tu mélanges tout.
Ton code est un patchwork de bouts de scripts, pêchées par çi par là, et collés ensemble tant bien que mal.

La première chose à savoir ici, c'est qu'il existe plusieurs scripts/widgets de "datepicker".
Dont :

Ces 2 "datepicker" N'ONT PAS forcément la MEME SYNTAXE.
Il faut donc savoir de quoi on parle.

1- Tu parles de "Bootstrap datepicker", alors qu'il n'y à RIEN dans ton code qui appelle Bootstrap JS (fichier JS). Il n'y a que le CSS.
Par contre, tu as bien jquery-ui.js.

2- $.fn.datepicker.dates['xx'] est (sauf erreur) une syntaxe spécifique à "Bootstrap datepicker" (que tu n'utilises donc pas ici !)
Par contre, avec "jquery UI - datepicker", il faut utiliser $.datepicker.regional['xx'] (ou intégrer le fichier : jquery.ui.datepicker-fr.js).

BREF, tu ne sais pas vraiment de quoi tu parles...

**laurentSc** · 27/04/2019, 11h40

Bonjour Jérôme,

en fait, je suis en train de modifier un ancien code où je tente d'intégrer Bootstrap (d'où le mélange de Datepicker jQuery UI et Datepicker Bootstrap). Mon souci, c'est que quand j'ai mis Bootstrap-navbar et un Bootstrap login, j'ai déjà ajouté du CSS et du JS mais je sais plus lesquels…

Le mieux me semble de tout virer puis d'ajouter ce qu'il faut.

**laurentSc** · 07/05/2019, 18h12

C'est ce que j'ai fait, et c'est réglé.

[datepicker] Date de fin non active

jQuery

Discussions similaires

Partager

Partager