javascript - Bootstrap 日期选择器 + momentJS - Firefox "Invalid date"

Question

我将 bootstrap datepicker 与 moment.js 一起使用。

同样的方法在 Chrome 浏览器上运行良好。在 Firefox 上，它显示无效日期。

如果我将 format 更改为 dateFormat，则它可以在 Firefox 中使用。它将日期值更改为 MM/DD/YYYY 格式。 但是，我需要在输入字段中显示 dd-MM-YYYY 格式。

请告诉我我在导致 Firefox 无法工作的代码中遗漏了什么

这是我的 JavaScript 代码:

JS:

$('.pickerdate').datepicker({
   startDate: today,
   format: 'dd-mmm-yyyy',
   orientation: 'bottom',
   autoclose: true,
   endDate: "+1y"
});

var $returnDate = moment($('.pickerdate').val()).format('YYYYMMDDhhmm');

Answer 1

您在 Firefox 上收到Invalid date，因为您尝试解析的字符串不符合 ISO 8601 格式。作为momentjs parsing docs说:

Warning: Browser support for parsing strings is inconsistent. Because there is no specification on which formats should be supported, what works in some browsers will not work in other browsers.

For consistent results parsing anything other than ISO 8601 strings, you should use String + Format.

所以你必须使用 moment(String, String); 。对于您的情况:

moment($('.pickerdate').val(), 'DD-MM-YYYY')

无论如何请注意，您可以使用 getDate获取日期选择器值的方法。正如文档所述，它

Returns a localized date object representing the internal date object of the first datepicker in the selection

<小时/>

这里是一个工作示例，展示了如何使用日期选择器的 getDate 和 moment 解析格式从选择器获取日期(并使用 moment 以自定义格式将其打印到控制台)。我建议使用 getDate 版本。

var today = moment().toDate();
$('.pickerdate').datepicker({
   startDate: today,
   format: 'dd-M-yyyy',
   orientation: 'bottom',
   autoclose: true,
   endDate: "+1y"
});

$('#btn1').click(function(){
  var date = $('.pickerdate').datepicker('getDate');
  if( !date ) return;
  var $returnDate = moment(date).format('YYYYMMDDhhmm');
  console.log($returnDate);
});
$('#btn2').click(function(){
  var val = $('.pickerdate').val();
  if( !val ) return;
  var $returnDate = moment(val, 'DD-MMM-YYYY').format('YYYYMMDDhhmm');
  console.log($returnDate);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<input type="text" class="form-control pickerdate">
<button id="btn1" type="button" class="btn btn-primary">Get date picker</button>
<button id="btn2" type="button" class="btn btn-primary">Get date moment</button>

<小时/>

请注意，bootstrap datepicker 和 momentjs 使用不同的格式 token 。 我的示例使用 2 位月份数字，如果您需要使用缩写和完整月份名称，请使用:

• M、MM 代表 bootstrap datepicker
• MMM、MMMM 为 momentjs