3

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

Álvaro González
  • 142,137
  • 41
  • 261
  • 360
aaronted
  • 187
  • 1
  • 6
  • 20
  • 1
    But what datapicker library are you trying to use? [Datepicker for Bootstrap](https://github.com/eternicode/bootstrap-datepicker) or [jQuery UI Datepicker](https://github.com/jquery/jquery-ui)? – Álvaro González Jan 11 '20 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 Jan 11 '20 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 Jan 11 '20 at 13:12
  • Yes @ÁlvaroGonzález I guess it has to be different. Let's go with the jQuery Datepicker please – aaronted Jan 11 '20 at 13:17

1 Answers1

4

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" />
Pedram
  • 15,766
  • 10
  • 44
  • 73
  • 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 – aaronted Jan 11 '20 at 12:34
  • @TedAaron Do you include **just** jquery-ui.js ? remove `fr` package – Pedram Jan 11 '20 at 12:38
  • Yes @Pedram I removed the line for the `datepicker-fr.js` inclusion – aaronted Jan 11 '20 at 12:51
  • @TedAaron any error in console? .. what can I say without see – Pedram Jan 11 '20 at 12:52
  • 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 ` – aaronted Jan 11 '20 at 12:56
  • errors in the console are about FontAwesome.. Do you think there may be a problem with my links and scripts in the head? I've been trying removing some but each of them seem needed – aaronted Jan 11 '20 at 13:03
  • @TedAaron I don't think so, while there is no error related to date picker, if tru eng version shouldn't show up! , I recommend you, remove all, just use jquery and jquery ui with this script that I shared. – Pedram Jan 11 '20 at 13:07
  • I did what you proposed and I'm now getting an error in the console: ` TypeError: b.browser is undefined` which is referring to the jQuery library I'm using in the head tag. When I switch to yours I finally get the datepicker in the wanted language. Thank you! – aaronted Jan 11 '20 at 13:53
  • @TedAaron Glad to help and hear that it solved your problem. If you like `+1` and accept the answer. – Pedram Jan 11 '20 at 13:55
  • Is there a way to make it more esthetic though please using the jQuery library..? – aaronted Jan 11 '20 at 14:01
  • @TedAaron jQuery UI ? or jQuery? It's not clear what you said – Pedram Jan 11 '20 at 14:03
  • yes jQuery UI. As I was using bootstrap datepicker library too, I think it was giving another prettier rendering I'm not having with this jQuery library.. any thought on how to make it look better maybe? – aaronted Jan 11 '20 at 14:12
  • @TedAaron check updated answer. is this what you want? – Pedram Jan 11 '20 at 14:14