将日期转换为其他时区日期对象react datePicker

Question

我正在使用一个名为react datepicker 的组件

我的约会选择器正在返回这样的约会，我在科罗拉多州。

"Thu Oct 27 2022 02:00:00 GMT-0600 (Mountain Daylight Time)"

当我把它转换成UTC时，我得到了这个

"2022-10-27T08:00:00Z"

我需要能够将我的时区设置为美国/纽约，这样我的日期选择器就可以给我一个这样的对象，

"Thu Oct 27 2022 02:00:00 GMT-0400 (New_York or whatever its actually called)"

这样，当我转换为utc时，我可以得到低于的输出

"2022-10-27T06:00:00Z"

有人能帮我吗？

我也可以转换这个吗

"Thu Oct 27 2022 02:00:00 GMT-0600 (Mountain Daylight Time)"

到这个

"Thu Oct 27 2022 02:00:00 GMT-0400 (New_York or whatever its actually called)"

这是我的组件

<DatePicker
key={index}
showPopperArrow={false}
onChange={(date) => { 
console.log('date', date)
// this shows Thu Oct 27 2022 02:00:00 GMT-0600 (Mountain Daylight Time), I need to be able to convert this to Thu Oct 27 2022 02:00:00 GMT-0400 (New_York, or any timezone for that matter)
selected={new Date(wkday?.trigger_time)}
customInput={<CustomInputWeekdayTimes />}
showTimeSelect
showTimeSelectOnly
timeIntervals={60}
timeCaption="Time"
/>

Answer 1

以下是我如何使用即时时区实现我想要的目标

//date coming in like this Sat Oct 29 2022 02:00:00 GMT-0600 (Mountain Daylight Time)
const applyOffset = date.setTime(date.getTime() - date.getTimezoneOffset() * 60_000);
const actualTime = new Date(applyOffset).toISOString().replace("Z", "")
const toTz = momentt.tz(actualTime, timezone).format()
const getUTCTime = momentt.utc(toTz).format()

请注意，传递给momentt.tz(actualTime，timezone(的时区变量.format((可以是任何命名的时区，如"；America/New_York"；或"；美国/芝加哥"；

当我console.log(getUTCTime(时，我得到2022-10-29T06:00:00Z；America/New_York"；

这是实际的datePicker组件

<DatePicker
key={index}
showPopperArrow={false}
onChange={(date) => { 
const applyOffset = date.setTime(date.getTime() - date.getTimezoneOffset() * 60_000);
const actualTime = new Date(applyOffset).toISOString().replace("Z", "")
const toTz = momentt.tz(actualTime, timezone).format()
const getUTCTime = momentt.utc(toTz).format()

//console.log("moment.utc", momentt.utc(date).format())
// const incomingDate = new Date(date).getTime()
//const ourStartDate = new Date(startDate).getTime()
//  if(incomingDate < ourStartDate) {
//  const newD = new Date(date)
// const sevenDaysAhead = newD.setDate(newD.getDate() + 7)
return setFormObj(
{...formObj,
repeatCampaignWeekdayTimes: {...formObj?.repeatCampaignWeekdayTimes, [el]: formObj?.repeatCampaignWeekdayTimes[el].map((obj) => {if(obj.uid === wkday.uid) { return {trigger_time: getUTCTime, uid: obj.uid, triggered: false} } else { return obj } })}
})

}}
selected={new Date(wkday?.trigger_time)}
customInput={<CustomInputWeekdayTimes />}
showTimeSelect
showTimeSelectOnly
timeIntervals={60}
timeCaption="Time"
/>