如何在React中基于固定时区（坦克位置）而不是用户浏览器时区来处理日期和时间？

Question

我在石油和天然气行业工作，我们应用程序的主要功能是存储储罐测量值。我们当前的方法在捕获和存储这些测量值时使用浏览器的时区。但是，我们的团队决定改用坦克位置的时区，而不是用户的本地时区。

我们使用 React 作为我们的前端库。在我们的应用程序中，我们严重依赖 new Date() 来进行日期相关的操作，并且我们已经基于 new Date() 编写了所有日期转换逻辑。但是，如果我们切换到使用坦克的位置时区，则使用 new Date() 似乎不再可行，因为它取决于用户的本地时区。

要求应用程序应始终使用坦克的位置时区，无论用户的实际位置如何。我更愿意在不依赖外部库的情况下实现这一目标。我如何用纯 JavaScript 处理这种情况？具体来说：

1.如何管理日期并将其转换为固定时区（水箱的位置）？ 2. 纯粹使用 JavaScript 处理此问题的最佳实践是什么？ 3.我应该如何处理日期选择器和时间输入，以便它们反映并存储坦克所在时区的日期？

export function getDateAfterSpecificMonth(monthCount: number, date: any) {
    date = new Date(date)
    // get the target year, month, date
    const year = date.getFullYear() + Math.trunc(monthCount / 12)
    const month = date.getMonth() + monthCount % 12
    let day = date.getDate()
    if (day > 27) {   // get a valid date
        const lastDateofMonth = new Date(year, month + 1, 0).getDate()
        day = Math.min(day, lastDateofMonth)
    }
    return new Date(year, month, day)
};

export function getDateBeforeSpecificMonth(monthCount: number, date: any) {
    date = new Date(date)
    // get the target year, month, date
    const year = date.getFullYear() - Math.trunc(monthCount / 12)
    const month = date.getMonth() - monthCount % 12
    let day = date.getDate()
    if (day > 27) {   // get a valid date
        const lastDateofMonth = new Date(year, month + 1, 0).getDate()
        day = Math.min(day, lastDateofMonth)
    }
    return new Date(year, month, day)
};

     <Row>
                <Col md={12} className="mb-3">
                    <CustomDatePicker
                        displayBlock={true}
                        className="inerg-text-primary me-1"
                        defaultType={filterState.type}
                        defaultDate={filterState.date}
                        theme={theme}
                        valueCallBack={(val: any, type: any, typeChange: any) => {
                            updateCustomDate(val, type, typeChange)
                        }}
                        options={customDateOptions.bulkEntry}
                        dateRange={dateRange}
                    />
                </Col>
     </Row>

我一直在探索各种方法，包括使用 JavaScript 的内置 Date 和 Intl 对象手动调整日期。但是，我正在尝试收集不同的方法来了解在整个应用程序中一致应用坦克位置时区的最佳方法。我正在寻找一种易于维护且不需要外部库的可靠方法。

我正在创建一个自定义日期对象，类似于

new Date()

，它保留本机

Date

对象的所有方法和功能，但基于指定的时区而不是浏览器的默认时区进行操作。

new Date(); // Native behavior using browser time zone.  
new customDate(); // Desired behavior using a specified time zone.

Answer 1

通常建议以 UNIX 纪元时间或 ISO 8601 时间戳存储所有日期（

new Date()

也使用这种格式），并且仅当您想要向用户显示它们时才将它们转换为时区特定格式。

标准格式始终为时区特定细节留有空间，以便在需求发生变化时进行更改。并且还允许您使用直接使用日期的库。

如果您选择走这条路线，您只需更改您使用的所有

.toString()

功能，如下所示：

Date.prototype.toLocaleTimeString = function(locale = 'en-IN', options = {}) {
    options.timeZone = 'Asia/Kolkata';
    return this.toLocaleTimeString(locale, options);
}

---

如果您已经以特定时区格式存储了值，我仍然建议您看看是否可以在整个过程中更改它们。但如果这是不可能的，并且您必须以特定时区格式读取日期，则可以在日期库周围编写一个包装器以读取特定格式的日期：

class DateIST extends Date {
    constructor(dateInput) {
        if (dateInput) {
            // Create the Date object and adjust to IST
            super(dateInput);
            this.setTime(this.getTime() + 5.5 * 60 * 60 * 1000);
        } else {
            // No input means use the current date/time
            super();
            this.setTime(this.getTime() + 5.5 * 60 * 60 * 1000);
        }
    }
}

注意：我在所有示例中都使用了 IST (UTC+0530)。