在 Safari 上使用 React 的日期选择器

Question

我的应用程序使用 Semantic UI React 库中的 Form.Input 来插入日期。它在 Chrome 和 Firefox 上显示日期选择器，但在 Safari 上不显示。我尝试使用 react-datepicker 库，但它具有不同的样式，并且很难将其输入与语义 UI React 的表单中的其他输入对齐。我能做什么？

这是在 Safari 上不起作用的 Form.Input 类型示例。

<Form.Input
    label='From'
    type='date'
    min={this.state.filters.data_inizio}
    value={moment(this.state.filters.data_fine).format('YYYY-MM-DD')}
    onChange={
        (e) => this.setState({
            ...this.state,
            filters: {
                ...this.state.filters,
                data_fine: moment(e.target.value).format('YYYY-MM-DD')
            }
        }, this.filter)
    } />

Answer 1

坏消息。

语义UIReact不支持输入日期类型。

您在 Chrome 和 Firefox 中看到的是类型为 "date".

的默认输入浏览器版本

Safari 不支持输入类型="date"。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Browser_compatibility

我试过语义UI React 和plain side-by-side

  <Container>
    <Form>
      <Form.Input
      label='From'
      type='date' 
      min={data_inizio}
      value={moment(data_fine).format('YYYY-MM-DD')}
      onChange={
          (e) => this.setState({
            filters: {
                ...filters,
                data_fine: moment(e.target.value).format('YYYY-MM-DD')
            }
      }, this.filter)
    } />
    </Form>
    <span><strong>Plain version</strong></span><br/>
    <input type="date" />
  </Container>

完整示例：https://codepen.io/anon/pen/GBdoQW

第一个选择器与下面的普通选择器相同。第一个只得到一些语义 CSS.

在 Safari 中尝试。它们只是常规文本输入。 :(

Answer 2

您可以试试这个由 airbnb 制作的名为 'react-dates' 的很酷的日期选择器...

Github：airbnb / react-dates（用于文档）

官方现场演示：click here

代码沙箱演示（由我制作以帮助您入门）：https://codesandbox.io/s/l5oo5r4pxl

Answer 3

终于找到一个新项目，实现了一个通用的DatePicker，风格是semantic-ui-react.

Link to the GitHub repository

Answer 4

我发现 react-dates 非常无用，因为我使用的是 yarn 而不是 npm，而且他们只为 npm 用户添加了安装文档。

我推荐 react-day-picker，很好的文档，相对容易设置。

https://react-day-picker.js.org/

safari 浏览器开发者没有添加默认 html 日期选择器真是愚蠢，真是个浏览器笑话...

在 Safari 上使用 React 的日期选择器

Datepicker with React on Safari

javascript

input

datepicker

reactjs

semantic-ui