我的应用程序使用来自 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)
} />
最佳答案
坏消息。
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 和 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 中尝试。它们只是常规文本输入。 :(
关于javascript - 在 Safari 上使用 React 的日期选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51573083/