How to change language on bootstrap 4 datepicker

Question

I've been stuck on changing the language of a calendar from English which is the default to French on Bootstrap 4 and I can't do it, it's driving me mad!

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapdatepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script src="./js/main.js"></script>
<script>
$(document).ready(function() {
    var date_input = $('input[name="date"]');
    var container = $('.input-group').length > 0 ? $('.input-group').parent() :
        'body';
    var options = {
        format: 'dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
        daysOfWeekDisabled: [0, 6],
        weekStart: [1]
    };
    date_input.datepicker(options);
});
</script>

Thanks

Can you add the link to the package datepicker ? So we can help you — Djamel, Dec 04 '18 at 11:00
Possible duplicate of [Change language for bootstrap DateTimePicker](https://stackoverflow.com/questions/19382189/change-language-for-bootstrap-datetimepicker) — Ali Heikal, Dec 04 '18 at 11:01

score 4 · Answer 1 · answered May 09 '19 at 10:30

4

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>

Use this tag after bootstrap-datepicker. and this

$('.datepicker').datepicker({
      language: 'fr'})

It will work.

answered May 09 '19 at 10:30

nagaraj

241
2
5

score 2 · Answer 2 · answered Dec 04 '18 at 11:43

2

It's because you haven't passed the language key to options.

Try adding this keys as options:

 var options = {
    language: 'fr'
};

All locales are available under js/locales. Be sure to include it after plugin initialization.

References:
1- https://bootstrap-datepicker.readthedocs.io/en/latest/i18n.html
2- https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#language
3- Change language for bootstrap DateTimePicker

answered Dec 04 '18 at 11:43

Mehrdad Shokri

1,974
2
29
45

Thanks very much, Mehi I really appreciate. I've tried this 2 days ago and now but it doesn't work for me! It's really driving me mad! – Hafidev Dec 04 '18 at 12:30
Can you tell me what you tried? did you add language to options? can give a code sandbox or git repo? – Mehrdad Shokri Dec 04 '18 at 14:51
the form is on index.html end the button is on menu nav top-right "se faire rappler" https://hafid-good.github.io/aro/index.html thanks very much – Hafidev Dec 04 '18 at 20:51

score 0 · Answer 3 · edited Jun 17 '20 at 16:45

0

You can use translation i18n of lang and call it, theres no needed to call language specific. Like this.

this.$i18n.t("fixed_pickups.weekdays.monday") }

edited Jun 17 '20 at 16:45

David Buck

3,752
35
31
35

answered Jun 17 '20 at 16:35

Ana Pereira

9
1

How to change language on bootstrap 4 datepicker

3 Answers3