[Bootstrap 4]mettre datepicker en fr et en en

Version imprimable

Bonsoir,

suite à une recherche (https://www.1formatik.com/1056/comme...er-en-francais), j'ai pu mettre un datepicker-bootstrap en français :

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
 
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"rel="stylesheet">
</head>
<body>
<input type="text" class="form-control datepicker"  placeholder="sélectionnez une date">
 
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<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>
</body>
 
</html>

J'ai essayé de le modifier pour avoir un input en français et un autre en anglais, mais ça veut pas :

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
63
64
65
 
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"rel="stylesheet">
</head>
<body>
<input type="text" class="form-control datepicker" id="datepickerfr" placeholder="sélectionnez une date">
<br/>
<input type="text" class="form-control datepicker" id="datepickeren" placeholder="choose a date">
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<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));
 
(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: ["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: "mm/dd/yyyy"
};
}(jQuery));
 
 
$('.datepickerfr').datepicker({
language: 'fr',
autoclose: true,
todayHighlight: true
})
 
 
$('.datepickeren').datepicker({
language: 'en',
autoclose: true,
todayHighlight: true
})
</script>
</body>
 
</html>

Bien sûr, je n'ai pas tout mis en anglais, mais mon souci est que les calendriers n'apparaissent pas. Comment fallait-il modifier le script initial ?

Comme les scripts fr seul et en seul fonctionnent, j'ai imaginé un script où on les retrouve, mais seul le cas $fr true fonctionne, donc aidez-moi svp :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"rel="stylesheet">
</head>
<body>
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>   
<?php 
$fr=0;
if ($fr==true) {?>
        <input type="text" class="form-control datepicker" placeholder="sélectionnez une date">
        <br/>
 
        <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 {?>
        <input type="text" class="form-control datepicker" placeholder="choose a date">
 
        <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: "dd/mm/yyyy"
        };
        }(jQuery));
 
 
        $('.datepicker').datepicker({
        language: 'en',
        autoclose: true,
        todayHighlight: true
        })
        </script>
<?php } ?>
</body>
 
</html>

Je suis arrivé à mes fins avec le code suivant :

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
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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"rel="stylesheet">
</head>
<body>
<div style="padding-top:200px">
<form action="" method="POST">
<input type="radio" name="lgue" id="fr" value="fr">
<label for="fr">fr </label>
<br/>
<input type="radio" name="lgue" id="en" value="en">
<label for="en">en </label>
<input type="submit" name="choix" value="langue">
</form>        
 
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>   
<?php
if (isset($_POST['choix'])) {
        $lg=$_POST['lgue'];
        if ($lg=="fr") {?>
                <input type="text" class="form-control datepicker" placeholder="sélectionnez une date">
                <br/>
 
                <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 {?>
                <input type="text" class="form-control datepicker" placeholder="choose a date">
 
                <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: "dd/mm/yyyy"
                };
                }(jQuery));
 
 
                $('.datepicker').datepicker({
                language: 'en',
                autoclose: true,
                todayHighlight: true
                })
                </script>
        <?php }
} ?>
</div>
</body>
 
</html>