JavaScript Moment.js计算两个日期之间的百分比

Question

我正在使用Moment.js插件，并且我有HTML。

<div class="record-time pull-right" data-date="2013-09-22 20:16:39"
         data-completion-date="2019-08-07 00:00:00">

</div>

我想要计算从data-date属性到data-completion-date属性经过的时间百分比，但是这些日期在Firefox或IE中无法使用，但在Chrome中可以。我可以使用以下代码从日期中获取时间：

      moment(new Date(record_time.attr('data-date'))).fromNow()

但是它只在Chrome中有效，我在这里漏掉了什么吗？ 日期从mysql数据库datetime字段中提取。

在Firefox和IE中我得到了'NaN'。 答案：

 var record_time = $(this).find('.record-time');
 var creation_date = $(this).find('.record-time').data('date');
 var completion_date = $(this).find('.record-time').data('completion-date');

 // get percentage completed (now - startDate) / (endDate - startDate)
 now = moment();
 startDate = moment(creation_date);
 endDate = moment(completion_date);
 var percentage_complete = (now - startDate) / (endDate - startDate) * 100;
 var percentage_rounded = (Math.round(percentage_complete * 100) / 100); 
 // percentage rounded to 2 decimal points

 // set the progress bar percentages
 var record_progress = $(this).find('.bar');
 record_progress.css('width', percentage_rounded+'%');
 record_progress.html(percentage_rounded+'% - Completed');

最新版本的Chrome、Firefox和IE都支持此功能。

- CaptRisky

---

我建议使用jQuery的data('date')而不是attr()。 - Ian Brindley

record_time是元素，它可以很好地从属性中获取数据，不确定您的意思是什么。 - CaptRisky

data('date') 在某些版本的IE上无法正常工作。 - Daniel Gimenez

Answer 1

根据文档，moment.js可以解析该日期格式的字符串。

尝试使用以下方式解析日期：

moment(record_time.data('date'));

- Jason P

---

是的，这比使用本地日期更好。 - olan

它在 Chrome 中继续以这种方式工作 'moment(record_time.data('date'));'，但不适用于 Firefox 或 IE。 - CaptRisky

现在在所有浏览器中都可以工作了，感谢@Jason P，但如何计算从data-date属性到data-completion-date属性经过的时间百分比。 - CaptRisky

我有一个变量 'var percentage_complete = (moment() - creation_date) / (completion_date - creation_date);'，使用上面的变量，结果只得到了 'NaN' - 这不是我的最好时刻 ;) - CaptRisky

对于每个值都执行 console.log() 并查看出现了什么问题。 - Jason P

Answer 2

查看Date.parse规范，期望的日期字符串格式为RFC2822或ISO 8601。您的日期字符串都不是这两种格式。

Date.parse("2013-09-22 20:16:39") -> NaN in FireFox
Date.parse("2013-09-22T19:16:39Z") -> 1379877399000 in FireFox

- olan

---

我直接从 MySQL 的 datetime 字段中获取日期，渲染 HTML 之前需要对其进行格式化吗？ - CaptRisky