Как отформатировать дату с помощью Bootstrap-datepicker?

Question

Я знаю, насколько знаменит эта тема ... но мой вопрос немного сложнее. Я прочитал документацию here Я хочу показать дату во французском формате (дд/мм/гггг) и сохранить значение в формате США (гггг-мм-дд). Мне также нужно указать 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

Получить значение, разделить его на "/" en rejoin them afterwards.

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', если вы хотите изменить format. (например, нет французские названия месяцев и дней)

Вам не нужно toDisplay и toValue преобразовать дату в нужный формат YYYY-MM-DD, вы можете использовать вспомогательные функции, как показано в примере ниже.

---

Обратите внимание, что startDate документов говорят, что:

Строка должна быть интерпретируемой с format.

В вашем примере, вероятно, не может быть проанализирован из-за -.

И наконец, я предлагаю использовать импульсы для простоты как first day of month calculation, так и format conversion. Здесь есть рабочий пример использования момента и i18n Datepicker в:

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