Change language for bootstrap DateTimePicker

I use bootstrap-datetimepicker.js Copyright 2012 by Stefan Petre

http://www.malot.fr/bootstrap-datetimepicker/index.php

I import the js and another language, for example Russian:

<script type="text/javascript" 
  src="/Resources/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" 
  src="/Resources/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.ru.js" charset="UTF-8"></script>

in document.ready

$(document).ready(function () {
    // debugger;

    $(".form_datetime").datetimepicker({
        isRTL: false,
        format: 'dd.mm.yyyy hh:ii',
        autoclose:true
    });
});

but it is not translated

I tried to insert on init

**language: "RU"**
**language: "ru"**
**language: "ru-RU"**

but nothing changes, Do you have any proposal?

Answers:

Answer

i think you have to set it in the options:

$(".form_datetime").datetimepicker({
    isRTL: false,
    format: 'dd.mm.yyyy hh:ii',
    autoclose:true,
    language: 'ru'
});

if its not working, be sure that:

$.fn.datetimepicker.dates['en'] = {
    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    today: "Today"
};

is defined for 'ru'

Answer

If you use moment.js the you need to load moment-with-locales.min.js not moment.min.js. Otherwise, your locale: 'ru' will not work.

Answer

you need to add the javascript language file,after the moment library, example:

<script type="text/javascript" src="js/moment/moment.js"></script>
<script type="text/javascript" src="js/moment/es.js"></script>

now you can set a language.

<script type="text/javascript">
$(function () {
  $('#datetimepicker1').datetimepicker({locale:'es'});
});
</script>

Here are all language: https://github.com/moment/moment

Answer

The option is locale: 'ru'

But first, you have to call the script ../moment.js/version/locale/ru.js

Hope this helps.

Answer

Just include your desired locale after the plugin. You can find it in locales folder on github https://github.com/uxsolutions/bootstrap-datepicker/tree/master/dist/locales

<script src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>

and then add option

$('.datepicker').datepicker({
   language: 'XX'
});

Where XX is your desired locale like ru

Answer

1.you will use different locale array element in datepicker.js from following link https://github.com/smalot/bootstrap-datetimepicker/tree/master/js/locales

2.add array in datepicker.js like this:

$.fn.datepicker.Constructor = Datepicker;
    var dates = $.fn.datepicker.dates = {
        en: {
            days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
            daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
            months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            today: "Today"
        },
        CN:{
        days: ["???", "???", "???", "???", "???", "???", "???", "???"],
        daysShort: ["??", "??", "??", "??", "??", "??", "??", "??"],
    daysMin: ["?", "?", "?", "?", "?", "?", "?", "?"],
    months: ["??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "???", "???"],
    monthsShort: ["??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "???", "???"],
    today: "??",
    suffix: [],
    meridiem: ["??", "??"]
}
	};

Answer

1.First add this js file to your HTML.

<script th:src="@{${webLinkFactory.jsLibRootPath()}+'/bootstrap-datepicker.nl.min.js'}" charset="UTF-8"type="text/javascript"></script>

obviously after moment.min.js.

content of bootstrap-datepicker.nl.min.js will be

;(function($){
    $.fn.datepicker.dates['nl'] = {
        days: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
        daysShort: ["Zon", "Man", "Din", "Woe", "Don", "Vri", "Zat", "Zon"],
        daysMin: ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"],
        months: ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
        monthsShort: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
        today: "Vandaag",
        suffix: [],
        meridiem: []
    };
    $.fn.datetimepicker.dates['nl'] = {
        days: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
        daysShort: ["Zon", "Man", "Din", "Woe", "Don", "Vri", "Zat", "Zon"],
        daysMin: ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"],
        months: ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
        monthsShort: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
        today: "Vandaag",
        suffix: [],
        meridiem: []
    };
}(jQuery));

2.set this line in the ready function of your js file.

$(document).ready(function () {
    $.fn.datetimepicker.defaults.language = 'nl';
}

3.initialize your datetimepicker in this way

$(this).datetimepicker({
                        format: "yyyy-mm-dd hh:ii",
                        autoclose: true,
                        weekStart: 1,
                        locale: 'nl',
                        language: 'nl'
                    });

following this steps i was able to convert my english datepicker and datetimepicker to dutch successfully.

Answer

For those who like me could not solve this problem with the solutions above, I sugest verifying if you initialize the $(element).datetimepicker(...) in different locations at the same time.

In my case, after a long time, I found a global.js interfering with another datetimepicker initialization.

If you need for some reason maintain work with different initializations, in different files, remember to remove the datetimepicker before each one with:

$(element).datetimepicker('remove')

Reference: https://www.malot.fr/bootstrap-datetimepicker/index.php#methods

Edit: This solution still needs to import the language files correctly, right after the bootstrap-datetimepicker.js.

I hope this helps!

Answer

This is for your reference only:

https://github.com/rajit/bootstrap3-datepicker/tree/master/locales/zh-CN

https://github.com/smalot/bootstrap-datetimepicker

https://bootstrap-datepicker.readthedocs.io/en/v1.4.1/i18n.html

The case is as follows?

 <div class="input" id="event_period">
   <input class="date" required="required" type="text">
 </div>

 $.fn.datepicker.dates['zh-CN'] = {
    days:["???","???","???","???","???","???","???"],
    daysShort:["??","??","??","??","??","??","??"],
    daysMin:["?","?","?","?","?","?","?"],
    months:["??","??","??","??","??","??","??","??","??","??","???","???"],
    monthsShort:["1?","2?","3?","4?","5?","6?","7?","8?","9?","10?","11?","12?"],
    today:"??",
    clear:"??"
  };

  $('#event_period').datepicker({
    inputs: $('input.date'),
    todayBtn: "linked",
    clearBtn: true,
    format: "yyyy?mm?",
    titleFormat: "yyyy?mm?",
    language: 'zh-CN',
    weekStart:1 // Available or not
  });
Answer

Try this:

$( ".form_datetime" ).datepicker( $.datepicker.regional[ "zh-CN" ], { dateFormat: 'dd.mm.yyyy hh:ii' });
Answer

all you are right! other way to getting !

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.ru.min.js

You can find out all languages on there https://cdnjs.com/libraries/bootstrap-datepicker

https://labs.maarch.org/maarch/maarchRM/commit/3299d1e7ed25018b48715e16a42d52c288b4da3e

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.