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

Posted 2023-05-07

技术标签:

【中文标题】在 Safari 上使用 React 的日期选择器【英文标题】：Datepicker with React on Safari 【发布时间】：2019-01-05 11:18:51 【问题描述】：

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

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

<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)
     />

【问题讨论】：

你能链接到 Semantic ui React 的日期选择器吗？我没看到。这是一个简单的Form.Input，属性为type="date" 【参考方案1】：

坏消息。

Semantic UI React 不支持输入日期类型。

您在 Chrome 和 Firefox 中看到的是 type="date" 输入的默认浏览器版本。

Safari 不支持 type="date" 的输入。

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

我尝试了 Semantic UI React 和普通的并排

  <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 中尝试。它们只是常规的文本输入。 :(

【讨论】：

【参考方案2】：

你可以试试这个由 airbnb 制作的名为“react-dates”的酷日期选择器......

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

官方现场演示：click here

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

【讨论】：

【参考方案3】：

最后我找到了一个新项目，它实现了一个通用的 DatePicker，风格为 semantic-ui-react。