我有以下格式的日期，2019-01-02T03:04:05我想像這樣在 UI 中轉換和顯示它：2019 年 1 月 3 日。我不太確定呼叫什么格式以及如何將它們轉換為所需的格式，如下所示：3rd of Jan 2019.
有誰知道如何實作這一目標？我正在使用 JavaScript 和 React 來處理這個邏輯。
uj5u.com熱心網友回復：
對于格式化日期 - 使用諸如 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
你有2ndJan 的，而不是 Jan 的3rd。
uj5u.com熱心網友回復：
我同意@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'
uj5u.com熱心網友回復：
您可以使用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
uj5u.com熱心網友回復：
您可以使用Day.js ==> 快速 2kB 替代 Moment.js，并使用相同的現代 API
- 對于格式檢查部分格式和高級格式插件
代碼：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/489629.html
標籤：javascript 反应 日期