Question

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

这是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)
    } />

Answer 1

坏消息。

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

您在Chrome和Firefox中看到的是输入的默认浏览器版本，输入的类型为“ date”。

Safari不支持输入type =“ date”的输入。

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

我尝试了语义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中尝试。它们只是常规的文本输入。：（

Answer 2

您可以尝试使用由airbnb制作的这个很酷的日期选择器“ react-dates” ...

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

官方现场演示：click here

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

Answer 3

最后，我找到了一个新项目，该项目以语义ui-react的样式实现了通用的DatePicker。

Link to the GitHub repository

Answer 4

我发现react-dates几乎没有用，因为我使用的不是npm的yarn，而他们只为npm用户添加了安装文档。

我建议使用react-day-picker，好的文档，相对容易设置。

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

真的很愚蠢，野生动物园浏览器开发人员没有添加默认的html datepicker，这真是一个浏览器的笑话...

在Safari上使用React的Datepicker

4 个答案: