Question 279518 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to change language of my calendar in JQuery?

I am using Symfony to build a form with a datepicker. I have found the day to have a datepicker but I don’t know how to have it in french.

This is the code in my base.html.twig file :

{# Date picker #}

        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
        
        <script>
        {% if app.request.locale == 'en' %}
            $(document).ready(function() {
                $('.js-datepicker').datepicker({
                    format: 'DD MM d yyyy'
                });
            });
        {% elseif app.request.locale == 'fr' %}
            $(document).ready(function() {
                $('.js-datepicker').datepicker({
                    format: 'DD d MM yyyy'
                });
            });
        {% endif %}
        </script>
Tags:

2

Answers


  1. 0

    Here, you can try this to change the language.

    <input type="text" class="js-datepicker">

<script>
    $(document).ready(function() {
        $('.js-datepicker').datepicker({
            format: 'DD d MM yyyy',
            language: 'fr'
        });
    });
</script>
    Login or Signup to reply.
  2. 0

    If you want to change language of datepicker (english to french), you’ll need to use $.datepicker.setDefaults

    // on change la langue du datepicker
$.datepicker.setDefaults({
  altField: "#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', 'Avril', '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'
});

$("#test").datepicker();
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<input type="text" name="test" id="test" placeholder="Select a date">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search