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

Question

我知道这个话题有多出名……但我的问题有点复杂。 我在这里阅读文档我想以法语格式 (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 而不是 07/09/2016
• 开始日期：不起作用

任何人都可以帮助我吗？

Answer 1

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

Answer 2

获取价值将其拆分为“/”然后重新加入它们。

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

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

Answer 3

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

如果您只想更改格式，请使用format: 'dd/mm/yyyy' 。 （例如，月份和日期没有法语名称）

你不需要toDisplay和toValue你的日期转换成所需的YYYY-MM-DD格式，你可以使用一个辅助函数如下图所示的例子。

---

请注意， startDate文档说：

字符串必须可解析为format 。

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

最后，我建议使用momentjs来简化月份的第一天计算和格式转换。 这里有一个使用 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>