JS实现Date日期格式的本地化的方法小结

 更新时间:2024年06月21日 09:26:23   作者:胖蔡  
为了更好的更新多语言日期的显示,所以希望实现日期的本地化格式显示要求,常规的特殊字符型格式化无法满足显示要求,这里整理了几种我思考实现的本地化实现功能

引言

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

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

  • 官方基础支持: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数据格式,使用国际化插件配置对应的本地化数据进行格式化填充即可,原理很简单,但有点费时费力,如果实在无法实现的时间格式可以考虑自己封装实现,具体实现不提供了。

到此这篇关于JS实现Date日期格式的本地化的方法小结的文章就介绍到这了,更多相关JS Date格式本地化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS 实现双色表格实现代码

    JS 实现双色表格实现代码

    通过为<tr>元素添加属性或类型选择器,再通过CSS设置可以实现双色表格,但如果表格很长,逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。
    2009-11-11
  • JS模拟Dialog弹出浮动框效果代码

    JS模拟Dialog弹出浮动框效果代码

    这篇文章主要介绍了JS模拟Dialog弹出浮动框效果代码,涉及JavaScript可拖动窗口的创建及布局相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 跟我学习javascript的this关键字

    跟我学习javascript的this关键字

    跟我学习javascript的this关键字,this是动态绑定,或称为运行期绑定的,这就导致 JavaScript中的this关键字有能力具备多重含义,带来灵活性的同时,也为初学者带来不少困惑
    2015-11-11
  • 原生JS实现特效留言框

    原生JS实现特效留言框

    这篇文章主要为大家详细介绍了原生JS实现特效留言框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js实现对ajax请求面向对象的封装

    js实现对ajax请求面向对象的封装

    这篇文章主要介绍了js实现对ajax请求面向对象的封装的相关资料,需要的朋友可以参考下
    2016-01-01
  • 深入理解JavaScript系列(6) 强大的原型和原型链

    深入理解JavaScript系列(6) 强大的原型和原型链

    JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型
    2012-01-01
  • javascript实现3D切换焦点图

    javascript实现3D切换焦点图

    一款用JavaScript模仿3D立体切换效果的js焦点幻灯片特效,使用方法很简单:用鼠标拖拽图片向左右方向就好~
    2015-10-10
  • 解决layui的table.checkStatus失效问题

    解决layui的table.checkStatus失效问题

    这篇文章主要介绍了解决layui的table.checkStatus失效问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • JavaScript CSS解析B站的弹幕可以不挡人物原理及技巧

    JavaScript CSS解析B站的弹幕可以不挡人物原理及技巧

    这篇文章主要为大家介绍了JavaScript CSS解析B站的弹幕可以不挡人物原理及技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • JavaScript树形菜单功能实现方法总结

    JavaScript树形菜单功能实现方法总结

    树形菜单是前端开发中常见的交互组件,用于展示具有层级关系的数据(如文件目录、分类列表、组织架构等),这篇文章主要介绍了JavaScript树形菜单功能实现方法的相关资料,需要的朋友可以参考下
    2025-08-08

最新评论