如何在JavaScript具体格式化日期?

Question

我有以下格式的日期2019-01-02T03:04:05，我想在UI中转换并显示它:2019年1月3日。我不太确定什么格式被称为以及如何将它们转换成所需的格式，如:3rd of Jan 2019。

有人知道如何实现这个吗?我使用JavaScript和React来处理这个逻辑。

Answer 1

对于格式化日期-使用库更容易(也是最佳实践)，如moment.js或类似的。

moment('your date here').format('output format here (read moment.js docs and see an examles)');
moment().format('MMMM Do YYYY, h:mm:ss a');  // June 13th 2022, 10:26:03 am

对于您的情况:

moment('2019-01-02T03:04:05').format('Do [of] MMM YYYY'); // 2nd of Jan 2019

你有1月的2nd，而不是1月的3rd

Answer 2

可以使用date-fns库进行格式化

const date = "2019-01-02T03:04:05";

format(new Date(date), "do 'of' MMM yyyy"); // 2nd of Jan 2019

格式选项:https://date-fns.org/v2.28.0/docs/format

Answer 3

我同意@Sergej。

对于格式化日期-使用库更容易(也是最佳实践)，如moment.js或类似的。

但是如果你想创建自己的函数，我想你可以使用这个。

function formatDate(date) {
const d = new Date(date);
const day = d.getDate();
const month = d.toLocaleString('default', { month: 'short' });
const year = d.getFullYear();
return `${ordinal(day)} of ${month} ${year}`;
}
function ordinal(day) {
const suffixes = ['th', 'st', 'nd', 'rd'];
const mod100 = day % 100;
const suffix = (mod100 >= 11 && mod100 <= 13) ? 'th' : suffixes[(day % 10 < 4) ? (day % 10) : 0];
return `${day}${suffix}`;
}
console.log(formatDate("2019-01-02T03:04:05")) //Output: '2nd of Jan 2019'

Answer 4

你可以使用Day.js ==>使用相同的现代API，快速2kB替代Moment.js

• 用于格式检查节格式和高级格式插件
代码:

const dates = [
'2019-01-01T03:04:05',
'2019-01-02T03:04:05',
'2019-01-03T03:04:05',
'2019-01-04T03:04:05',
'2019-01-05T03:04:05',
'2019-01-30T03:04:05',
'2019-01-31T03:04:05'
]
const datesFormated = dates.map(d => dayjs(d).format('Do [of] MMM YYYY'))
console.log(datesFormated)

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.3/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.3/plugin/advancedFormat.min.js" integrity="sha512-MGC6Za7V8BU0nL3GVjgssHGIZkIMM6A+tcnxqwkdDASdOnyHwmCwyoVfxSYDxiznl4DDYeZP0Jn0p5MW+r4Rnw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>dayjs.extend(window.dayjs_plugin_advancedFormat)</script>