Я пытаюсь реализовать плагин bootstrap-datepicker.js. (https://bootstrap-datepicker.readthedocs.io/en/latest/ У меня есть файлы .js и .css, но я получаю этот уродливый стандартный jquery datepicker на китайском языке:

enter image description here

$('#test').datepicker({ });

Как я могу это исправить?

Мой код:

<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');
    });
});

Спасибо майк

3
Mxkert 25 Сен 2018 в 14:10

2 ответа

Лучший ответ

Возник конфликт между JQueryUI и Bootstrap для datepicker проверки Проверьте эту ссылку

$.fn.datepicker.noConflict = function(){
 $.fn.datepicker = old;
  return this;
  };

Или вы можете использовать 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>
3
Nikhil Ghuse 25 Сен 2018 в 13:07

Плагин поддерживает названия месяцев i18n и weekday, а также опцию weekStart.

По умолчанию - английский (en); другие доступные переводы доступны в каталоге js / locales / , просто укажите желаемый языковой стандарт после плагина.

Чтобы добавить больше языков, просто добавьте ключ в $ .fn.datepicker.dates перед вызовом .datepicker (). Пример:

$.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

} ;

Языки с письмом справа налево также могут включать rtl: true для правильного отображения календаря.

Если ваш браузер (или ваши пользователи) неправильно отображает символы, скорее всего, браузер загружает файл javascript в кодировке, отличной от Unicode. Просто добавьте charset = "UTF-8" в свой тег скрипта:

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

  $('.datepicker').datepicker({
    language: 'en'
   });
2
Mile Mijatović 25 Сен 2018 в 11:30