如何使用 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>