I've been trying to change language shown by the datepicker. Default is english, I want to use french. I've got some results during searches but none seems working for me smh... I've tried those 1,2, 3, 4, 5 but still got no change in the language... I must be doing something wrong somewhere I guess
Here is a simplified version (yet all necessary information) of my code:
<head>
<link href=".5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src=".4.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('main/assets/js/main.js') }} "></script>
<script type="text/javascript" src="{{ asset('main/assets/js/jquery.min.js') }} "></script>
<script type="text/javascript" src=" {{ asset('main/assets/js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src=".8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src=" {{ asset('main/assets/js/datepicker-fr.js') }}"> </script>
<script src=".5.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
<input class="date form-control" type="text" id="datepicker" name="date" placeholder="Définir date limite de disponiblité de cette thématique">
<script>
$(function (){
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$('#datepicker').datepicker({
autoclose: true,
format: 'dd-mm-yyyy'
});
});
</script>
</body>
The referred datepicker-fr.js file is the one found here .js
According what I found on the net, I've successively changed my script to be :
<script>
$(function (){
$('#datepicker').datepicker( $.datepicker.regional[ "fr" ] );
});
</script>
<script>
$(function (){
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$('#datepicker').datepicker();
});
</script>
<script>
$(function (){
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$('#datepicker').datepicker({
closeText: "Fermer",
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", "avr.", "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.",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""
});
});
</script>
The date is still displaying in english and I'm not getting a problem shown in the console. What am I missing here? Your help would be very appreciated thanks
I've been trying to change language shown by the datepicker. Default is english, I want to use french. I've got some results during searches but none seems working for me smh... I've tried those 1,2, 3, 4, 5 but still got no change in the language... I must be doing something wrong somewhere I guess
Here is a simplified version (yet all necessary information) of my code:
<head>
<link href="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('main/assets/js/main.js') }} "></script>
<script type="text/javascript" src="{{ asset('main/assets/js/jquery.min.js') }} "></script>
<script type="text/javascript" src=" {{ asset('main/assets/js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src=" {{ asset('main/assets/js/datepicker-fr.js') }}"> </script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
<input class="date form-control" type="text" id="datepicker" name="date" placeholder="Définir date limite de disponiblité de cette thématique">
<script>
$(function (){
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$('#datepicker').datepicker({
autoclose: true,
format: 'dd-mm-yyyy'
});
});
</script>
</body>
The referred datepicker-fr.js file is the one found here https://github./jquery/jquery-ui/blob/master/ui/i18n/datepicker-fr.js
According what I found on the net, I've successively changed my script to be :
<script>
$(function (){
$('#datepicker').datepicker( $.datepicker.regional[ "fr" ] );
});
</script>
<script>
$(function (){
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$('#datepicker').datepicker();
});
</script>
<script>
$(function (){
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$('#datepicker').datepicker({
closeText: "Fermer",
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", "avr.", "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.",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""
});
});
</script>
The date is still displaying in english and I'm not getting a problem shown in the console. What am I missing here? Your help would be very appreciated thanks
Share Improve this question edited Jan 11, 2020 at 13:18 Álvaro González 147k45 gold badges279 silver badges377 bronze badges asked Jan 11, 2020 at 11:45 aarontedaaronted 2861 gold badge7 silver badges24 bronze badges 4- 1 But what datapicker library are you trying to use? Datepicker for Bootstrap or jQuery UI Datepicker? – Álvaro González Commented Jan 11, 2020 at 13:00
- this is my first time using datepicker tbh. I may not doing right but when I remove either jQuery UI Datepicker or Bootstrap datepicker, it is not showing anymore so as you can see in the head tag I got both.. – aaronted Commented Jan 11, 2020 at 13:09
- But are you aware that they are entirely different programs written by different teams with different code and different usage? Which of the two is the one you want to use? – Álvaro González Commented Jan 11, 2020 at 13:12
- Yes @ÁlvaroGonzález I guess it has to be different. Let's go with the jQuery Datepicker please – aaronted Commented Jan 11, 2020 at 13:17
1 Answer
Reset to default 5Just include jQuery-Ui and set fr for default language, of course before init
$(function() {
$.datepicker.regional['fr'] = {
closeText: "Fermer",
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", "avr.", "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.",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""
};
$.datepicker.setDefaults($.datepicker.regional['fr']);
$('#datepicker').datepicker();
});<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<input id="datepicker" />