javascript - 远程时区的material-ui LocalizationProvider

Question

我的应用程序需要 material-ui 日期和时间选择器才能在服务器指定的远程时区上运行。我希望日期选择器上的今天圆圈实际指示远程时区中的今天，并且我想将远程时区中的日期时间转换为自 1970-01-01T00:00:00Z 以来的秒数.
我正在使用material-ui v5 alphas。 docs假设您指定了 @date-io adapter为您的时间图书馆。看起来有四个明显的选择:

@date-io/date-fns (基于 date-fns 和 date-fns-tz 有一个损坏的远程时区设计。它使用 Javascript 日期来表示远程时区中的日期和时间，但如果本地时区有“ Spring ”小时，则有你无法代表的时间。issue。

@date-io/dayjs (基于 dayjs )不能正确处理夏令时。 issue

@date-io/luxon (基于 luxon )看起来很有希望

@date-io/moment (基于 moment 和 moment-timezone )看起来很有希望

所以我想为 luxon 或 moment 指定一个在特定区域中构造日期的适配器。
任何一个库都支持设置全局默认时区( luxon ， moment )，但我更喜欢在构建特定日期适配器时设置时区。根据服务器响应乱搞全局状态是很严重的。
我找到了 date-io issue说的是:

You can pass moment-time zone right to the libInstance in this case it will use time zone set of the moment instance or global one

这就是我想要的!但我对这个实例到底应该是什么感到困惑。我对 Javascript 很陌生，这无济于事。 @date-io/luxon构造函数似乎不允许像今天这样覆盖实例。
试图让这一刻开始工作:

$ mkdir tztest
$ cd tztest
$ npm init -y
$ npm install --save moment moment-timezone '@date-io/moment'
$ node
> let MomentUtils = require('@date-io/moment');
undefined
> let moment = require('moment');
undefined
> let _ = require('moment-timezone');
undefined

> // Operations including the following should all work similarly to when using the default instance:
> (new MomentUtils()).date();
Moment<2021-03-18T11:57:30-07:00>
> (new MomentUtils()).date('2021-01-01T00:00:00');
Moment<2021-01-01T00:00:00-08:00>
> (new MomentUtils()).getCurrentLocaleCode();
'en'

> // Here's some garbage I tried
> (new MomentUtils({instance: moment().tz('America/New_York')})).date();
Uncaught TypeError: _this.moment is not a function
    at MomentUtils.date (/Users/slamb/git/tztest/node_modules/@date-io/moment/build/index.js:78:32)
> (new MomentUtils({instance: moment.tz('America/New_York')})).date();
Uncaught TypeError: _this.moment is not a function
    at MomentUtils.date (/Users/slamb/git/tztest/node_modules/@date-io/moment/build/index.js:78:32)
> (new MomentUtils({instance: () => moment.tz('America/New_York')})).date();
Moment<2021-03-18T14:44:07-04:00>
> (new MomentUtils({instance: () => moment.tz('America/New_York')})).date('2021-01-01T00:00:00');
Moment<2021-03-18T14:44:19-04:00>
> (new MomentUtils({instance: (arg1, arg2, arg3, arg4) => moment.tz(arg1, arg2, arg3, arg4, 'America/New_York')})).date('2021-01-01T00:00:00');
Moment<2021-01-01T00:00:00-05:00>
> (new MomentUtils({instance: (arg1, arg2, arg3, arg4) => moment.tz(arg1, arg2, arg3, arg4, 'America/New_York')})).getCurrentLocaleCode();
Uncaught TypeError: _this.moment.locale is not a function
    at MomentUtils.getCurrentLocaleCode (/private/tmp/tztest/node_modules/@date-io/moment/build/index.js:63:49)
> (new MomentUtils({instance: (arg1, arg2, arg3, arg4) => moment.tz(arg1, arg2, arg3, arg4, 'America/New_York')})).date();
Moment<2021-03-18T14:44:36-04:00>
> (new MomentUtils({instance: function() { return moment(arguments).tz('America/New_York'); } })).date()
...here the interpreter started making fun of me...

来自 @date-io/moment source ，如下所述，我看到它以几种不同的方式使用它。当然，我希望所有这些都能正常工作。

export default class MomentUtils implements IUtils<defaultMoment.Moment> {
  ...
  constructor({ locale, formats, instance }: Opts = {}) {
    this.moment = instance || defaultMoment;
  ...
    return /A|a/.test(this.moment().localeData().longDateFormat("LT"));
  ...
          return this.moment.localeData().longDateFormat(token as LongDateFormatKey);
  ...
    return this.locale || this.moment.locale();
  ...
      return this.moment(value, format, this.locale, true);
  ...
    return this.moment(value, format, true);
  ...
    const moment = this.moment(value);
  ...
    return this.moment.weekdaysShort(true);

Answer 1

问题是 material-ui 针对不同的主要版本有不同的文档和日期适配器集成 api。
我得到了moment-timezone与 @material-ui/pickers@4.0.0-alpha.11 合作
依赖关系

"@material-ui/core": "4.11.3",
"@material-ui/pickers": "4.0.0-alpha.11",
"moment": "2.29.1",
"moment-timezone": "0.5.33",
"react": "17.0.2",
"react-dom": "17.0.2"

工作演示
https://codesandbox.io/s/material-ui-starter-template-forked-pvpmc
代码示例

import React from "react";
import { render } from "react-dom";
import momentTimezone from "moment-timezone";
import { TextField } from "@material-ui/core";
import { DatePicker, LocalizationProvider } from "@material-ui/pickers";
import MomentAdapter from "@material-ui/pickers/adapter/moment";

const App = () => {
  const timeZoneFromServer = "Asia/Tokyo";
  const { moment } = new MomentAdapter({ instance: momentTimezone });
  const dateWithTimeZone = moment().tz(timeZoneFromServer);

  const handleDateChange = () => {};

  return (
    <LocalizationProvider dateAdapter={MomentAdapter}>
      <DatePicker
        renderInput={(props) => <TextField {...props} />}
        value={dateWithTimeZone}
        onChange={handleDateChange}
      />
    </LocalizationProvider>
  );
};

render(<App />, document.getElementById("root"));