Bootstrap Datepicker Locale with MomentJS

Question

I am using a Bootstrap Datepicker available here and everything is working fine. However, I want to localize the calendar given a user's preferred language. I've set the following when I initialize the datepicker:

locale: 'fr'

However, I get a console error that reads:

Uncaught TypeError: locale() locale fr is not loaded from moment locales!

I am including MomentJS in my project:

<script src="/vendors/moment/min/moment.min.js"></script>

This is my first implementation so I feel like I'm missing something simple but just can't figure it out.

Answer 1

As the error messages says, you just have to include the desired locale to solve your issue. If you need only fr locale, you can add something like this:

<script src="/vendors/moment/locale/fr.js"></script>

after moment import.

EDIT:

If you need multiple locales you can import locales.js instead of fr.js. Moreover moments provides a single file, moment-with-locales.min.js, with moment library + all supported locales.

If you want to dynamically set locale for you picker, you can use locale function:

// Example with german locale
var localeString = 'de';
$('#your-picker-id').data("DateTimePicker").locale(localeString);