changing datepicker language is not working

Question

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.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">

        <script src="https://ajax.googleapis.com/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.com/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.com/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.com/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

But what datapicker library are you trying to use? Datepicker for Bootstrap or jQuery UI Datepicker? — Álvaro González
– Á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
– 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
– Á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
– aaronted, Commented Jan 11, 2020 at 13:17

Pedram · Accepted Answer · 2020-01-11 14:14:36Z

5

Just 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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<input id="datepicker" />

edited Jan 11, 2020 at 14:14

answered Jan 11, 2020 at 11:59

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

aaronted Over a year ago

thank you @Pedram for your answer. I just tried it but date still in english. It apparently works well in the snippet though.. I'm really not understanding what's going on

Pedram Over a year ago

@TedAaron Do you include just jquery-ui.js ? remove fr package

aaronted Over a year ago

Yes @Pedram I removed the line for the datepicker-fr.js inclusion

Pedram Over a year ago

@TedAaron any error in console? .. what can I say without see

aaronted Over a year ago

There are errors but 'minors' one and they're not related to datepicker though:

downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:0) source: https://kit-free.fontawesome.com/algo/2/webfonts/fa-brands-400-free-5.0.0.eot

|

Collectives™ on Stack Overflow

changing datepicker language is not working

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related