使用 date-fns 格式化持续时间(从秒开始)
Format a duration ( from seconds ) using date-fns
给定整数值 1807
,使用 date-fns 格式化为 30:07
?
是的,我知道这可以用 vanilla js 实现,但是使用 date-fns 可以吗?
您可以使用 date-fns 通过简单地修改中间助手日期来执行此操作。使用 new Date( 0 )
你会得到一个日期设置为 1970 年 1 月 1 日,00:00:00 UTC。然后,您可以使用 date-fns 中的 addSeconds
添加相关秒数(实际上您可以为此使用本机日期 setTime( 1000 * seconds )
)。格式化分钟和秒将为您提供所需的结果。
var input = document.getElementById('seconds');
var output = document.getElementById('out');
output.innerText = formattedTime(input.value);
input.addEventListener('input', function() {
output.innerText = formattedTime(input.value);
});
function formattedTime(seconds) {
var helperDate = dateFns.addSeconds(new Date(0), seconds);
return dateFns.format(helperDate, 'mm:ss');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.26.0/date_fns.min.js"></script>
<input type="number" id="seconds" value="1807">
<pre id="out"></pre>
下面是简单的实现:
import { formatDistance } from 'date-fns'
const duration = s => formatDistance(0, s * 1000, { includeSeconds: true })
duration(50) // 'less than a minute'
duration(1000) // '17 minutes'
这与:
基本相同
import moment from 'moment'
const duration = s => moment.duration(s, 'seconds').humanize()
duration(50) // 'a minute'
duration(1000) // '17 minutes'
此函数会将秒数转换为持续时间格式 hh:mm:ss,其模拟持续时间为 moment.js
import { addHours, getMinutes, getHours, getSeconds } from 'date-fns';
export const convertToDuration = (secondsAmount: number) => {
const normalizeTime = (time: string): string =>
time.length === 1 ? `0${time}` : time;
const SECONDS_TO_MILLISECONDS_COEFF = 1000;
const MINUTES_IN_HOUR = 60;
const milliseconds = secondsAmount * SECONDS_TO_MILLISECONDS_COEFF;
const date = new Date(milliseconds);
const timezoneDiff = date.getTimezoneOffset() / MINUTES_IN_HOUR;
const dateWithoutTimezoneDiff = addHours(date, timezoneDiff);
const hours = normalizeTime(String(getHours(dateWithoutTimezoneDiff)));
const minutes = normalizeTime(String(getMinutes(dateWithoutTimezoneDiff)));
const seconds = normalizeTime(String(getSeconds(dateWithoutTimezoneDiff)));
const hoursOutput = hours !== '00' ? `${hours}:` : '';
return `${hoursOutput}${minutes}:${seconds}`;
};
date-fns 中似乎没有 moment.duration 的直接等价物...
我写的这个函数可能会对某人有所帮助。 Date-fns.differenceInSeconds 用于获取以秒为单位的总差值。毫秒、分钟等有等效的方法。
然后我使用 vanilla js 数学来格式化
/**
* calculates the duration between two dates.
* @param {date object} start The start date.
* @param {date object} finish The finish date.
* @return {string} a string of the duration with format 'hh:mm'
*/
export const formatDuration = (start, finish) => {
const diffTime = differenceInSeconds(finish, start);
if (!diffTime) return '00:00'; // divide by 0 protection
const minutes = Math.abs(Math.floor(diffTime / 60) % 60).toString();
const hours = Math.abs(Math.floor(diffTime / 60 / 60)).toString();
return `${hours.length < 2 ? 0 + hours : hours}:${minutes.length < 2 ? 0 + minutes : minutes}`;
};
根据 date-fns/date-fns#229 (comment) 中的示例代码,我们现在可以使用 intervalToDuration
将秒数转换为 Duration
,然后可以根据 OP 的需要简化格式设置:
import { intervalToDuration } from 'date-fns'
const seconds = 10000
intervalToDuration({ start: 0, end: seconds * 1000 })
// { hours: 2, minutes: 46, seconds: 40 }
因此对于 OP 的需求:
import { intervalToDuration } from 'date-fns'
const seconds = 1807
const duration = intervalToDuration({ start: 0, end: seconds * 1000 })
// { minutes: 30, seconds: 7 }
const formatted = `${duration.minutes}:${duration.seconds}`
只需像这样使用 date-fns 中的 format:
format((seconds * 1000), 'mm:ss')
如果还需要删除时区小时偏移量,
getTimezoneOffset (in minutes) 可以使用:
let dt = new Date((seconds * 1000));
dt = addMinutes(dt, dt.getTimezoneOffset());
return format(dt, 'mm:ss');
给定整数值 1807
,使用 date-fns 格式化为 30:07
?
是的,我知道这可以用 vanilla js 实现,但是使用 date-fns 可以吗?
您可以使用 date-fns 通过简单地修改中间助手日期来执行此操作。使用 new Date( 0 )
你会得到一个日期设置为 1970 年 1 月 1 日,00:00:00 UTC。然后,您可以使用 date-fns 中的 addSeconds
添加相关秒数(实际上您可以为此使用本机日期 setTime( 1000 * seconds )
)。格式化分钟和秒将为您提供所需的结果。
var input = document.getElementById('seconds');
var output = document.getElementById('out');
output.innerText = formattedTime(input.value);
input.addEventListener('input', function() {
output.innerText = formattedTime(input.value);
});
function formattedTime(seconds) {
var helperDate = dateFns.addSeconds(new Date(0), seconds);
return dateFns.format(helperDate, 'mm:ss');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.26.0/date_fns.min.js"></script>
<input type="number" id="seconds" value="1807">
<pre id="out"></pre>
下面是简单的实现:
import { formatDistance } from 'date-fns'
const duration = s => formatDistance(0, s * 1000, { includeSeconds: true })
duration(50) // 'less than a minute'
duration(1000) // '17 minutes'
这与:
基本相同import moment from 'moment'
const duration = s => moment.duration(s, 'seconds').humanize()
duration(50) // 'a minute'
duration(1000) // '17 minutes'
此函数会将秒数转换为持续时间格式 hh:mm:ss,其模拟持续时间为 moment.js
import { addHours, getMinutes, getHours, getSeconds } from 'date-fns';
export const convertToDuration = (secondsAmount: number) => {
const normalizeTime = (time: string): string =>
time.length === 1 ? `0${time}` : time;
const SECONDS_TO_MILLISECONDS_COEFF = 1000;
const MINUTES_IN_HOUR = 60;
const milliseconds = secondsAmount * SECONDS_TO_MILLISECONDS_COEFF;
const date = new Date(milliseconds);
const timezoneDiff = date.getTimezoneOffset() / MINUTES_IN_HOUR;
const dateWithoutTimezoneDiff = addHours(date, timezoneDiff);
const hours = normalizeTime(String(getHours(dateWithoutTimezoneDiff)));
const minutes = normalizeTime(String(getMinutes(dateWithoutTimezoneDiff)));
const seconds = normalizeTime(String(getSeconds(dateWithoutTimezoneDiff)));
const hoursOutput = hours !== '00' ? `${hours}:` : '';
return `${hoursOutput}${minutes}:${seconds}`;
};
date-fns 中似乎没有 moment.duration 的直接等价物...
我写的这个函数可能会对某人有所帮助。 Date-fns.differenceInSeconds 用于获取以秒为单位的总差值。毫秒、分钟等有等效的方法。 然后我使用 vanilla js 数学来格式化
/**
* calculates the duration between two dates.
* @param {date object} start The start date.
* @param {date object} finish The finish date.
* @return {string} a string of the duration with format 'hh:mm'
*/
export const formatDuration = (start, finish) => {
const diffTime = differenceInSeconds(finish, start);
if (!diffTime) return '00:00'; // divide by 0 protection
const minutes = Math.abs(Math.floor(diffTime / 60) % 60).toString();
const hours = Math.abs(Math.floor(diffTime / 60 / 60)).toString();
return `${hours.length < 2 ? 0 + hours : hours}:${minutes.length < 2 ? 0 + minutes : minutes}`;
};
根据 date-fns/date-fns#229 (comment) 中的示例代码,我们现在可以使用 intervalToDuration
将秒数转换为 Duration
,然后可以根据 OP 的需要简化格式设置:
import { intervalToDuration } from 'date-fns'
const seconds = 10000
intervalToDuration({ start: 0, end: seconds * 1000 })
// { hours: 2, minutes: 46, seconds: 40 }
因此对于 OP 的需求:
import { intervalToDuration } from 'date-fns'
const seconds = 1807
const duration = intervalToDuration({ start: 0, end: seconds * 1000 })
// { minutes: 30, seconds: 7 }
const formatted = `${duration.minutes}:${duration.seconds}`
只需像这样使用 date-fns 中的 format:
format((seconds * 1000), 'mm:ss')
如果还需要删除时区小时偏移量, getTimezoneOffset (in minutes) 可以使用:
let dt = new Date((seconds * 1000));
dt = addMinutes(dt, dt.getTimezoneOffset());
return format(dt, 'mm:ss');