Question

我知道这个话题有多出名......但我的问题有点复杂。我阅读了文档here 我希望以法语格式（dd / mm / yyyy）显示日期，并以美国格式（yyyy-mm-dd）保存值。我还需要指定startDate，这是一个月的第一天。

我尝试了这个配置：

$(document).ready(function() {
  $('#datepicker').datepicker({
    format: {
      language: 'fr',
      toDisplay: function(date, format, language) {
        return date.getUTCDate() + "/" + (date.getUTCMonth() + 1) + "/" + date.getUTCFullYear();
      },
      toValue: function(date, format, language) {
        return new Date(date);
      }
    },
    //startDate: function(date) {
    //    return date.getUTCFullYear() + "-" + date.getUTCMonth() + "-01";
    //},
    autoclose: true,
    todayHighlight: true,
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<input type="text" id="datepicker" />

但是：

显示价值：不是真正的法国格式... 7/9/2016而不是 2016/07/09
StartDate：不起作用

有人可以帮我吗？

Answer 1

尝试使用moment.js，它有大量的时间格式化逻辑，它重量轻，易于使用，并具有语言环境支持。 http://momentjs.com/

Answer 2

将价值拆分为＆＃34; /＆＃34;之后重新加入他们。

dateparts = datevalue.split("/");
d = dateparts[0];
m = dateparts[1];
y = dateparts[2];
newdate = y + "/" + m + "/" + d;

然后您可以根据需要编辑每个部分。

Answer 3

如果您想本地化选择器，可以关注i18n docs。基本上，您必须使用特定于语言环境的设置导入其他js文件，然后指定language选项。这样您就可以自动自定义显示的格式。

如果您只想更改format，请使用format: 'dd/mm/yyyy'。（例如，几个月和几天没有法语名称）

您不需要toDisplay和toValue将日期转换为所需的YYYY-MM-DD格式，您可以使用辅助功能，如下例所示。

请注意，startDate文档说：

字符串必须可以使用format解析。

由于-，您的示例中的那个可能无法解析。

最后，我建议使用momentjs简化first day of month calculation和format conversion。这里有一个使用moment和datepicker的i18n的工作示例：

$(document).ready(function() {
  $('#datepicker').datepicker({
    language: 'fr',
    autoclose: true,
    todayHighlight: true,
    startDate: moment().startOf('month').toDate()
  });
  
  $('#btnGetDate').click(function(){
    var date = $('#datepicker').datepicker('getDate');
    var dateUsFormat = moment(date).format('YYYY-MM-DD');
    console.log(dateUsFormat); // date formatted in YYYY-MM-DD
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.fr.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<input type="text" id="datepicker" />
<button id="btnGetDate" class="btn btn-primary">Get Date</button>

如何使用Bootstrap-datepicker格式化日期？

3 个答案: