以年、月、日、小时和分钟的日期 fns 倒计时
Countdown in date-fns with years, months, days, hours & minutes
我正在使用 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})
使用以下 dateFns 函数获取组件,然后将它们与字符串连接在一起。
设x为较小的年份,y为较大的年份
保存在 x 和 y 上调用的 differenceInYears,它给出变量中的年数
将 x 和它作为参数传递给 addYears,分配给 x
在 x 和 y 上调用 differenceInMonths,保存
在 x 上调用 addMonths 并保存月数
对 differenceInDays 和 addDays、differenceInHours 和 addHours 做同样的事情
现在 x 距离 y 不到 60 分钟,所以调用 differenceInMinutes 就完成了(假设你的倒计时精确到分钟)。
这是您在 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);
您可以尝试这样的操作:
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>
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
我正在使用 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})
使用以下 dateFns 函数获取组件,然后将它们与字符串连接在一起。
设x为较小的年份,y为较大的年份 保存在 x 和 y 上调用的 differenceInYears,它给出变量中的年数 将 x 和它作为参数传递给 addYears,分配给 x
在 x 和 y 上调用 differenceInMonths,保存 在 x 上调用 addMonths 并保存月数
对 differenceInDays 和 addDays、differenceInHours 和 addHours 做同样的事情 现在 x 距离 y 不到 60 分钟,所以调用 differenceInMinutes 就完成了(假设你的倒计时精确到分钟)。
这是您在 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);
您可以尝试这样的操作:
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>
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