丑陋的引导日期选择器答案

【问题标题】：Ugly bootstrap datepicker丑陋的引导日期选择器
【发布时间】：2018-09-25 11:10:19
【问题描述】：

我正在尝试实现 bootstrap-datepicker.js 插件。 (https://bootstrap-datepicker.readthedocs.io/en/latest/) 我有 .js 和 .css 文件，但我得到了这个丑陋的中文标准 jquery datepicker：

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

谢谢，迈克

【问题讨论】：

请链接您正在使用的特定引导插件，因为插件过多。
这是插件：bootstrap-datepicker.readthedocs.io/en/latest
尝试在你的 datepicker 方法中设置 language: 'en'。
` $('#test').datepicker({ language: 'en', });` 还在输出中国历
确保您的代码中仍然没有其他 datepicker JS，例如 Jquery UI Datepicker 它看起来有点相似。

标签： javascript jquery html css bootstrap-4

【解决方案1】：

JQueryUI 和 Bootstrap 之间存在冲突 datepicker 检查 Check this link

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

【讨论】：

是的，你是对的，这是两者之间的冲突。它已经在 JS 文件的模板中安装和调用。才发现。谢谢你的回答。

【解决方案2】：

该插件支持月份的i18n 和weekday 名称和weekStart 选项。

默认为英文（en）； js/locales/ 目录中提供了其他可用的翻译，只需在插件后包含您想要的语言环境即可。

要添加更多语言，只需在调用 .datepicker() 之前向 $.fn.datepicker.dates 添加一个键。示例：

$.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 以使日历正确显示。

如果您的浏览器（或您的用户的浏览器）显示错误的字符，则可能是浏览器正在使用非 unicode 编码加载 javascript 文件。只需将 charset="UTF-8" 添加到您的脚本标签：

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

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

【讨论】：