Menu
I am trying to implement the bootstrap-datepicker.js plugin. (https://bootstrap-datepicker.readthedocs.io/en/latest/) I have the .js and .css files in place, but I'm getting this ugly standard jquery datepicker in chinese:
$('#test').datepicker({ });
How can I fix this?
My code:
<input type="text" id="test" name="test" class="sm-form-control" placeholder="DD-MM-JJJJ" autocomplete="off">
$(document).ready(function () {
$('#test').datepicker({
onSelect: function(d,i){
if(d !== i.lastVal){
$(this).change();
}
}
});
$('#test').change(function(){
console.log('Test');
});
});
Thanks, Mike
588
asked Dec 22 '25 03:12
There is an conflict between JQueryUI and Bootstrap for datepicker check Check this link
$.fn.datepicker.noConflict = function(){
$.fn.datepicker = old;
return this;
};
or you can use JQuery-UI
$( function() {
$( "#test" ).datepicker({
language: 'zh-TW'
});
});<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="i18n/datepicker-zh-TW.js"></script>
<body>
<p>Date:<input type="text" id="test" name="test" class="sm-form-control" placeholder="DD-MM-JJJJ" autocomplete="off">
</body>The plugin supports i18n for the month and weekday names and the weekStart option.
The default is English (en); other available translations are available in the js/locales/ directory, simply include your desired locale after the plugin.
To add more languages, simply add a key to $.fn.datepicker.dates, before calling .datepicker(). Example:
$.fn.datepicker.dates['en'] = {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
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",
clear: "Clear",
format: "mm/dd/yyyy",
titleFormat: "MM yyyy", /* Leverages same syntax as 'format' */
weekStart: 0
};
Right-to-left languages may also include rtl: true to make the calendar display appropriately.
If your browser (or those of your users) is displaying characters wrong, chances are the browser is loading the javascript file with a non-unicode encoding. Simply add charset="UTF-8" to your script tag:
<script src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>
$('.datepicker').datepicker({
language: 'en'
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
