javascript - 如何在 React JS 和 webpack 中使用 moment.js 格式化时间
问题描述
我正在使用时刻 JS 来格式化我的 React 应用程序中的日期,该应用程序没有使用create-react-app
. 我想将时间戳格式化为如下可读格式:
- 如果提供的时间戳是今天的,它应该只显示时间。例如:
2:00 pm
。 - 如果提供的时间戳是昨天的,它应该显示昨天没有时间。例如:
Yesterday
。 - 如果提供的时间戳是昨天之前的任何时间,它应该显示没有时间的确切日期。例如:
24 Feb, 2019
。
到目前为止我的代码:webpack.config.js:-
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
....
plugins: [
new MomentLocalesPlugin({
localesToKeep: ['es-us', 'hi']
})
]
应用程序.js
import React, { useEffect } from 'react';
import moment from 'moment';
const App = () => {
const timestamp = '1571744305';
return (
<Router>
<div>
{moment(timestamp).calendar()}//08/21/2019
</div>
);
};
export default App;
解决方案
使用 moment.js,你可以这样做
let now = moment.duration().humanize();
let oneMin = moment.duration(1, "minutes").humanize(); // a minute
let twoMin = moment.duration(2, "minutes").humanize(); // 2 minutes
let hours = moment.duration(24, "hours").humanize(); // a 24 hours
let days = moment.duration(24, "days").humanize(); // a 24 days
let weeks = moment.duration(2, "weeks").humanize(); // a weeks
let months = moment.duration(5, "months").humanize(); // a months
let years = moment.duration(7, "years").humanize(); // a years
console.log(now);
console.log(oneMin);
console.log(twoMin);
console.log(hours);
console.log(days);
console.log(weeks);
console.log(months);
console.log(years);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
推荐阅读
- linux - 内核如何知道物理内存基地址?
- java - 添加插件时,Mac 上的 Netbeans 在启动时崩溃
- php - 日志的主管自定义路径
- database - 触发选择子记录,乘以它们的值并更新父记录
- html - 全高方形图像(FF/Safari)
- c - bool 数据类型的指针是什么?
- c++ - 我不了解向量在这里的作用以及 adj[0] 如何存储数据{1,2}
- c - 当一个进程被分叉时,中间指针表会发生什么?C 叉函数
- c++ - 同一容器的多个自定义迭代器
- flutter - 错误:超类“Bloc”没有不带参数的未命名构造函数。类 OverViewListBloc 扩展 Bloc
> {