时间戳根据浏览器当前时区转换成日期时间

则慕

已于 2024-08-14 16:17:44 修改

阅读量217

点赞数 2

文章标签： javascript 前端 vue.js

于 2024-08-14 16:15:32 首次发布

本文链接：https://blog.csdn.net/qq_44842962/article/details/141193576

版权

1、获取浏览器语言


let languages = navigator.languages 
console.log(languages ) 
// ['zh-CN', 'en', 'zh']
let language = navigator.language 
console.log(language ) 
// 'zh-CN'

2、获取浏览器时区


let timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone 
console.log(timeZone ) 
// 'Asia/Shanghai'

3、date.toLocaleString
根据本地时间惯例，把 Date 对象转换为一个字符串，表示该日期和时间，具体格式取决于执行环境的地区设置
3.1 默认


let date = new Date();  
console.log(date.toLocaleString())
//  2024/8/14 16:07:05

3.2 使用特定的地区设置


let date = new Date();  
console.log(date.toLocaleString('en-US')) 
//  8/14/2024, 4:10:03 PM

3.3 自定义设置


let date = new Date();
let dateTime=date.toLocaleString('zh-CN', {  
  year: 'numeric',  
  month: 'long',  
  day: 'numeric',  
  hour: '2-digit',  
  minute: '2-digit',  
  second: '2-digit',  
  hour12: false // 使用24小时制  
})
console.log(dateTime) 

// 2024年8月14日 16:11:31

4、封装一个时间戳转换日期时间的方法


export const convertToDate = (isoString: string) => {
    const date = new Date(isoString)
    const dateTime= date.toLocaleString(getBrowserLanguage(), {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric',
        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
        hour12: false
    })
    return dateTime
}

export const getBrowserLanguage = () => {
    let language = navigator.languages[0] || navigator.language
    if (language.indexOf('en') > -1) {
        return 'en-US'; //返回en默认设置美国时间
    } else {
        return language
    }
}