Stan Blog: [JavaScript] datetime 轉太平洋時區 (Pacific Time Zone)

最近碰到一個需求, 需要把 rails form 的 input (datetime) 用 js 即時轉換成太平洋時區顯示在畫面上

js 可以使用 method toLocaleString

dateObj.toLocaleString([locales[, options]])

前面的 locales 參數影響顯示的格式, 後面的 options 用到的是 timeZone。需要填入 Asia/Taipeu、America/New_York 這種格式

example code

# 取得 input 的 datetime
datetime = $('input.expired_input').val()
// 2019/11/30 14:59

# 將 datetime 用伺服器時區建立出來
expired_date = new Date("#{datetime} #{gon.offset}")
//Sat Nov 30 2019 13:59:00 GMT+0800 (台北標準時間)

# 進行轉換
pt_date = expired_date.toLocaleString('en', { timeZone: 'America/Los_Angeles' })
// 11/29/2019, 9:59:00 PM

# 將轉換好的 pst 值塞進 element 的 value
$('.pt_expired_datetime').text(pt_expired_date)

上面的 gon.offset 是在 rails 層抓取的目前時區 offset, 再用 gem ‘gon’ 傳遞給 js

gon.offset = "+%02d00" % (Time.zone.utc_offset / 3600)

取出來會是

螢幕快照 2019-10-21 12 19 12

太平洋時區這裡是用 America/Los_Angeles

Ref:

Time Difference