datepicker : 使用法语 datepicker 时出错

Posted

技术标签:

【中文标题】datepicker : 使用法语 datepicker 时出错【英文标题】：datepicker : error using french datepicker 【发布时间】：2020-11-14 03:06:28 【问题描述】：

我想用法语显示日期选择器，我包含了本地的 cdn

这是我的代码

   <html>
   <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js">
        </script>
    </head>
                            
                            
    <body>
   <div class="row">
   <div class="col-md-3 col-md-offset-1">
   <div class='input-group date' id='datepicker'>
   <input type='text' class="form-control" />
   <span class="input-group-addon">
     <span class="glyphicon glyphicon-calendar"></span>
    </span>
    </div>
    </div>
    </div>
   <script type="text/javascript">
    $(function () 
                                    
     $('.datepicker').datepicker(
      language: 'fr')
      );
      </script>
      </body>
      </html>

它给了我 2 个错误

第一个错误

第二次错误

【问题讨论】：

我不熟悉引导程序，但我很确定您只是在这里包含了一个语言环境文件。您需要同时包含实际的基本 datepicker.js 文件 (cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/…)和所需的语言环境脚本。 【参考方案1】：

您还需要声明主日期选择器。此外，我还在输入中添加了缺少的 datepicker 类，然后以下 sn-p 工作。

$(function() 
  $('.datepicker').datepicker(
    language: 'fr'
  )
);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-3 col-md-offset-1">
    <div class="input-group date" id="datepicker">
      <!-- I've added the datepicker class, which you are using in your jQuery -->
      <input type="text" class="form-control datepicker" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

【讨论】：

【参考方案2】：

你可以试试这个库： 

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/gijgo@1.9.13/js/messages/messages.fr-fr.js" type="text/javascript"></script>
</head>
<body>
<div class="gj-clear-both"></div>
<div class="gj-margin-top-10">
    <input id="datepicker"  />
</div>

<script type="text/javascript">
  var datepicker, config;
  config = 
    locale: 'de-de',
    uiLibrary: 'bootstrap4'
  ;
  $(document).ready(function () 
    datepicker = $('#datepicker').datepicker(config);
      config.locale = 'fr-fr';
      datepicker.destroy();
      datepicker = $('#datepicker').datepicker(config);
  );
</script>
</body>
</html>
    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
        <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
        <script src="https://unpkg.com/gijgo@1.9.13/js/messages/messages.fr-fr.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="gj-margin-top-10">
        <input id="datepicker"  />
    </div>
    </body>
    </html>


<!-- end snippet -->

【讨论】：

以上是关于datepicker : 使用法语 datepicker 时出错的主要内容，如果未能解决你的问题，请参考以下文章

JQuery Datepicker - 没有默认日期

Nativescript Datepicker 更改文本颜色

从 html5 datepicker 禁用某些日期

Django 表单 - django-bootstrap-datepicker-plus 未呈现 datepicker

jQuery UI datepicker'setDate'方法不起作用

Bootstrap Datepicker - 只有月份和年份不起作用