JS 实现Date日期格式的本地化

为了更好的更新多语言日期的显示,所以希望实现日期的本地化格式显示要求,常规的特殊字符型格式化无法满足显示要求,这里整理了几种我思考实现的本地化实现功能。

通过多方查找,总结了实现的思路主要有如下三个方向:

  • 官方基础支持:javascript自支持Intl.DateTimeFormat实现本地化
  • 三方工具:如dayjs使用‘dayjs/plugin/localeData
  • 自己实现

DateTimeFormat实现本地化

JavaScript已经提供了可以使用的本地化功能:Intl.DateTimeFormat,只需要传入当前语言和日期基本可以完成本地化的输出,如下给出一些基础的实现:

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));// 假定下面输出的结果使用了洛杉矶时区(UTC-0800,太平洋标准时间)// 美式英语 (US English) 使用  month-day-year 格式
console.log(new Intl.DateTimeFormat("en-US").format(date));
// "12/19/2012"// 英式英语 (British English) 使用 day-month-year 格式
console.log(new Intl.DateTimeFormat("en-GB").format(date));
// "19/12/2012"// 韩国使用 year-month-day 格式
console.log(new Intl.DateTimeFormat("ko-KR").format(date));
// "2012. 12. 19."// 大部分阿拉伯国家使用阿拉伯字母 (real Arabic digits)
console.log(new Intl.DateTimeFormat("ar-EG").format(date));
// "١٩‏/١٢‏/٢٠١٢"// 在日本,应用可能想要使用日本日历,
// 2012 年是平成 24 年(平成是是日本天皇明仁的年号,由 1989 年 1 月 8 日起开始计算直至现在)
console.log(new Intl.DateTimeFormat("ja-JP-u-ca-japanese").format(date));
// "24/12/19"// 当请求可能不支持的语言,如巴厘语(ban)时,若同时指定了备用的语言,
// 那么将使用备用的语言输出(本例为印尼语(id))
console.log(new Intl.DateTimeFormat(["ban", "id"]).format(date));
// "19/12/2012"

同时,提供给我们使用options进行格式化的返回,这个很大程度已经足够使用了:

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));// 请求参数 (options) 中包含参数星期 (weekday),并且该参数的值为长类型 (long)
let options = {weekday: "long",year: "numeric",month: "long",day: "numeric",
};
console.log(new Intl.DateTimeFormat("de-DE", options).format(date));
// "Donnerstag, 20. Dezember 2012"// 应用可能需要使用世界标准时间 (UTC),并且 UTC 使用短名字 (short) 展示
options.timeZone = "UTC";
options.timeZoneName = "short";
console.log(new Intl.DateTimeFormat("en-US", options).format(date));
// "Thursday, December 20, 2012, GMT"// 有时需要更精确的选项
options = {hour: "numeric",minute: "numeric",second: "numeric",timeZone: "Australia/Sydney",timeZoneName: "short",
};
console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
// "2:00:00 pm AEDT"// 再精确些...
options.fractionalSecondDigits = 3; // 秒数的有效数字数量
console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
// "2:00:00.200 pm AEDT"// 即便是美国,有时也需要使用 24 小时制
options = {year: "numeric",month: "numeric",day: "numeric",hour: "numeric",minute: "numeric",second: "numeric",hour12: false,timeZone: "America/Los_Angeles",
};
console.log(new Intl.DateTimeFormat("en-US", options).format(date));
// "12/19/2012, 19:00:00"// 要使用选项,但是需要使用浏览器的默认区域,请使用 'default'
console.log(new Intl.DateTimeFormat("default", options).format(date));
// "12/19/2012, 19:00:00"
// 有时需要包含一天的时段
options = { hour: "numeric", dayPeriod: "short" };
console.log(new Intl.DateTimeFormat("en-US", options).format(date));
// 10 at night

将其封装成方法如下:

function formatLocalTime(date) {const options = {year: 'numeric',month: 'long',}// 我这里将lang写在html标签进行全局切换const formatter = new Intl.DateTimeFormat(document.documentElement.lang, options)return formatter.format(date)
}
const  date = new Date()
formatLocalTime(date) // 2024年3月

三方库提供的本地化

其他的日期库没了解,这里介绍dayjs库使用的本地化操作,dayjs自生无法直接进行本地化,是需要通过插件dayjs/plugin/localeData来配合实现的。

1、安装

$ npm install dayjs 
$ npm install dayjs/plugin/localeData

2、使用

// 引入 dayjs 和 locale 插件
const dayjs = require('dayjs');
const localeData = require('dayjs/plugin/localeData');
const zh = require('dayjs/locale/zh-cn'); // 需要加载对应的语言包dayjs.extend(localeData);
dayjs.locale(zh);const date = dayjs('2023-01-01');
console.log(date.format('MMMM D, YYYY')); // 一月 1, 2023

自己封装

原理比较简单,我们通过解析Date数据格式,使用国际化插件配置对应的本地化数据进行格式化填充即可,原理很简单,但有点费时费力,如果实在无法实现的时间格式可以考虑自己封装实现,具体实现不提供了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/28114.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue中的路由拦截器的作用

在Vue.js中,我们通常使用vue-router来处理路由。而“路由拦截器”通常指的是在路由发生变化之前,根据某些条件来允许或阻止路由的跳转。这通常用于用户身份验证、数据加载或其他需要在导航发生之前执行的逻辑。 在vue-router中,我们可以使用…

【鸿蒙 HarmonyOS】Swiper组件

一、背景 项目中通常会遇到图片轮播,内容轮播的场景;如:在一些应用首页显示推荐的内容时,需要用到轮播显示的能力。 二、源码地址 ✍Gitee开源项目地址👉:https://gitee.com/cheinlu/harmony-os-next-swi…

Nginx与Gateway

Nginx与Gateway Nginx 基本介绍 Nginx 是一款轻量级的高性能 Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。它由俄罗斯的 Igor Sysoev 所开发,最初供俄罗斯大型的门户网站及搜索引擎 Rambler 使用。 Nginx 的特点在于其占用…

多种异构数据的分析设计方案2:使用策略模式+函数式接口+MAP

多种异构数据的分析设计方案2:聊聊策略模式函数式接口MAP 定义 策略模式(Strategy Pattern): 定义并封装一系列算法类,并且这些类可以相互替换,可以在运行时根据需要选择不同的算法,而不需要修改客户端流程代码。 策略模式让算法…

质量小议39 -- 要多少饺子皮

试验、总结、调整; 基准、标量化、定制化。 包饺子,1斤肉,要多少饺子皮。 每次要包饺子总是要问这样的问题:皮少了馅没得处理,皮多了没地方放。 有没有一个好办法? 1. 影响饼子皮数量的原因有…

机房运维管理中的告警管理:构建高效IT故障管理体系

随着信息技术的迅猛发展,机房作为IT系统的核心,其运维管理的重要性日益凸显。其中,告警管理作为机房运维的关键环节,为用户提供了统一的全流程故障管理体系,确保网络故障的快速准确发现与处理。本文将深入探讨机房运维…

gma 2.0.10 (2024.06.16) | GmaGIS V0.0.0a4 更新日志

安装 gma 2.0.10 pip install gma2.0.10网盘下载: 链接:https://pan.baidu.com/s/1P0nmZUPMJaPEmYgixoL2QQ?pwd1pc8 提取码:1pc8 注意:此版本没有Linux版! 编译gma的Linux虚拟机没有时间修复,本期Linux版…

Dubbo入门与实践

Apache Dubbo是一款高性能的Java RPC框架,它提供了高效的服务发现和负载均衡机制。Dubbo适用于构建大规模的分布式系统,尤其是微服务架构。以下是Dubbo的入门指南和实践示例,帮助你开始使用Dubbo。 1. 环境准备 首先,确保你已经…

CAP和Base

CAP定理和BASE理论是分布式系统领域中两个重要的概念,它们分别描述了分布式系统设计中的一些基本限制和原则。 CAP定理 CAP定理,又称布鲁尔定理(Brewer’s theorem),由计算机科学家埃里克布鲁尔(Eric Bre…

oracle job

1. 定义 Job是一个可以被调度以在特定时间或按一定频率自动执行的数据库对象。Job通常用于执行预定的后台任务,如数据清理、统计信息更新、备份操作、数据导入导出、报告生成等。这些任务可以是任何可以在数据库环境中执行的操作,最常见的形式是调用存储…

AtCoder Beginner Contest 358 A~E(F,G更新中...)

A.Welcome to AtCoder Land 题意 给出两个字符串 S , T S, T S,T&#xff0c;请你判断是否满足&#xff1a; 字符串 S S S为AtCoder 字符串 T T T为Land 分析 输入后判断即可 代码 #include<bits/stdc.h> using namespace std; void solve() {string s, t;cin &g…

学习记录:VS2019+OpenCV3.4.1实现SURF库函数的调用

最近在学习opencv的使用&#xff0c;在参照书籍《OpenCV3编程入门》实现SURF时遇到不少问题&#xff0c;下面做归纳总结。 错误 LNK2019 无法解析的外部符号 “public: static struct cv::Ptr __cdecl cv::xfeatures2d::SURF::create(double,int,int,bool,bool)” (?createSUR…

51单片机实验05 -点阵

目录 一&#xff0c;熟悉矩阵led小灯 1&#xff0c;点亮矩阵的一只led 2&#xff0c;点亮矩阵的一排led 3&#xff0c;点亮矩阵的全部led static 关键字 unsigned 关键字 4&#xff0c;点阵的静态显示 2&#xff09;心形矩阵显示代码 3&#xff09;效果 二&#xff0c;课…

模仿qsort实现一个通用的冒泡排序

目录 前言 模仿 排序整型数组 排序结构体数组 排序字符数组 前言 qsort在前面我们讲到底层逻辑是快速排序的方式&#xff0c;是不是可以发现有了qsort来进行排序的话&#xff0c;就更加的方便快捷&#xff0c;我们在使用的时候 一方面&#xff0c;代码量会大大的减少 另一…

bat处理批量文件重命名

遇到需要批量重命名文件的情况&#xff0c;许多博主文章有方法介绍&#xff0c;但可行的不多。&#xff08;主要是推荐专用工具&#xff0c;但这些工具还都是要收费的。&#xff09;下面把我的办法分享下。 总体概括是使用bat文件处理。 1、生成Excle文件 2、全选要重命名的所…

北京多商入驻app开发项目的主要优势及功能

多商入驻app开发项目的定义 随着电子支付技术的不断成熟&#xff0c;全国各地的消费者通过网络在线上购物的频率越来越高&#xff0c;为此&#xff0c;多商入驻app开发项目应用而生。各商家也纷纷开始申请入驻商城平台&#xff0c;开设自己的店铺。 图片来源&#xff1a;unspl…

Ubuntu20.04环境下Baxter机器人开发环境搭建

Ubuntu20.04环境下Baxter机器人开发环境搭建 ubuntu20.04安装 略 安装ROS 略 Baxter机器人依赖安装 主目录创建工作空间&#xff0c;按以下步骤执行 mkdir -p ~/baxter_ws/src source /opt/ros/noetic/setup.bash cd ~/baxter_ws catkin_make catkin_make install s…

oracle的json_arrayagg的用法和例子

JSON_ARRAYAGG 是 Oracle 数据库中用于将多行数据聚合为一个 JSON 数组的函数。这个函数对于将查询结果转换为 JSON 格式特别有用&#xff0c;尤其是在 RESTful API 或需要 JSON 输出的应用中。 语法 sql JSON_ARRAYAGG ( [ DISTINCT | UNIQUE ] expr [ ON NULL { NULL | AB…

【CT】LeetCode手撕—121. 买卖股票的最佳时机

目录 题目1- 思路2- 实现⭐121. 买卖股票的最佳时机——题解思路 2- ACM实现 题目 原题连接&#xff1a;121. 买卖股票的最佳时机 1- 思路 模式识别 模式1&#xff1a;只能某一天买入 ——> 买卖一次 ——> dp 一次的最大利润 动规五部曲 1.定义dp数组&#xff0c;确…

数据结构之线性表(2)

顺序表中的动态存储 上文我们了解到了顺序表中的静态顺序表的相关操作&#xff0c;今天我们来学习动态顺序表的知识。 为什么会存在动态顺序表呢&#xff1f;&#xff1f; 原因&#xff1a;静态顺序表给定的数据容量固定&#xff0c;多了浪费&#xff0c;少了不够用。 首先我…