Question

我正在使用DateFNS，我需要用它生成一个倒计时。 distanceInWordsToNow仅在大约3年内输出，但我需要准确的时间，例如3 Years, 11 Months, 20 Days, 3 Hours, 2 Minutes。如何使用DateFNS存档？

这是一个CodePen示例： https://codepen.io/anon/pen/qGajJB

脚本

todaysDateMin: dateFns.distanceInWordsToNow(new Date(2022, 6, 2, 0, 0, 15), {addSuffix: true})

Answer 1

您可以尝试以下操作：

let humanizeFutureToNow = fDate => {
  let result = [], now = new Date()
  let parts = ['year', 'month', 'day', 'hour', 'minute']

  parts.forEach((p, i) => {
    let uP = p.charAt(0).toUpperCase() + p.slice(1)
    let t = dateFns[`differenceIn${uP}s`](fDate, now);
    if (t) {
      result.push(`${i===parts.length-1 ? 'and ' : ''}${t} ${uP}${t===1 ? '' : 's'}`);
      if (i < parts.length)
        fDate = dateFns[`sub${uP}s`](fDate, t);
    }
  })
  return result.join(' ');
}

console.log(humanizeFutureToNow(new Date('2022-11-11')))

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>

这个想法是在所有想要的时间段内运行（并具有受支持的date-fns函数），并生成包含所有字符串的数组。为此，我们首先运行受支持的differenceIn<PARTGOESHERE>以获取时间distance，然后使用sub<PARTGOESHERE>函数将其减去。之后，只需加入它们即可组成最终的字符串。

您可以在此处自定义和导出零件作为参数，以及输出中的首字母大写等。

这也是lodash版本：

let humanizeFutureToNow = fDate => {
  let result = [], now = new Date()
  let parts = ['year', 'month', 'day', 'hour', 'minute']

  _.each(parts, (p, i) => {
    let scPart = _.startCase(p)
    let t = _.invoke(dateFns, `differenceIn${scPart}s`, fDate, now);
    if (t) {
      result.push(`${i===parts.length-1 ? 'and ' : ''}${t} ${scPart}${t===1 ? '' : 's'}`);
      if (i < parts.length)
        fDate = _.invoke(dateFns, `sub${scPart}s`, fDate, t);
    }
  })
  return result.join(' ');
}

console.log(humanizeFutureToNow(new Date('2022-11-11')))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>

Answer 2

使用以下dateFns函数获取组件，然后将它们与字符串连接在一起。

让x为较小的年份，y为较大的年份保存在x和y上调用的differentInYears，它给出变量的年总数传递x并将其作为addYears的参数，分配给x

在x和y上调用differenceInMonths，保存在x上致电addMonths，节省了几个月的时间

对differenceInDays和addDays，differenceInHours和addHours做相同的操作现在x距离y不到60分钟，因此调用differenceInMinutes就可以了（假设countDown降到了分钟）。

这是在runkit.com上运行的示例，以说明该方法。

var dateFns = require("date-fns");
var x = new Date();
var y = new Date(2022, 2, 6, 0, 0, 15);
var temp;
temp = dateFns.differenceInYears(y, x);
var result = temp + " years ";
x = dateFns.addYears(x, temp);
temp = dateFns.differenceInMonths(y, x);
result = result + temp + " months ";
x = dateFns.addMonths(x, temp);
temp = dateFns.differenceInDays(y, x);
result = result + temp + " days ";
x = dateFns.addDays(x, temp);
temp = dateFns.differenceInHours(y, x);
result = result + temp + " hours ";
x = dateFns.addHours(x, temp);
temp = dateFns.differenceInMinutes(y, x);
result = result + temp + " minutes ";
x = dateFns.addMinutes(x, temp);
temp = dateFns.differenceInSeconds(y, x);
result = result + temp + " seconds";
console.log(result);

Answer 3

date-fns v2中的formatDuration()函数完全可以实现您想要的功能。

import { formatDuration, intervalToDuration } from 'date-fns'
let duration = intervalToDuration({
    start: new Date(2022, 6, 2, 0, 0, 15), 
    end: new Date(),
})

formatDuration(duration, {
    delimiter: ', '
})
// 2 years, 15 days, 23 hours, 49 minutes, 35 seconds

您甚至可以对其进行过滤。

// take the first three nonzero units
const units = ['years', 'months', 'weeks', 'days', 'hours', 'minutes', 'seconds']
const nonzero = Object.entries(duration).filter(([_, value]) => value || 0 > 0).map(([unit, _]) => unit)

formatDuration(duration, {
    format: units.filter(i => new Set(nonzero).has(i)).slice(0, 3),
    delimiter: ', '
})
// 2 years, 15 days, 23 hours

以日期，天数，年，月，日，小时和分钟倒数

3 个答案: