在Safari上使用React的Datepicker [英] Datepicker with React on Safari
问题描述
我的应用程序使用语义UI React 库中的Form.Input插入日期.它在Chrome和Firefox上都显示日期选择器,但在Safari上却不显示.我尝试使用react-datepicker库,但是它具有不同的样式,很难将其输入与语义UI React的Forms中的其他输入对齐.我能做什么?
这是Form.Input类型的示例,该类型在Safari上不起作用.
< Form.Inputlabel ='发件人'类型='日期'min = {this.state.filters.data_inizio}value = {moment(this.state.filters.data_fine).format('YYYY-MM-DD')}onChange = {(e)=>this.setState({...这个状态,过滤器:{... this.state.filters,data_fine:矩(e.target.value).format('YYYY-MM-DD')}},this.filter)}/>
坏消息.
语义UI React不支持输入日期类型.
您在Chrome&中看到了什么?Firefox是输入类型为"date"的默认浏览器版本.
Safari不支持输入type ="date"的输入.
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/date#Browser_compatibility
我尝试了语义UI React和并排
<容器><表单><表单输入label ='发件人'类型='日期'min = {data_inizio}值= {moment(data_fine).format('YYYY-MM-DD')}onChange = {(e)=>this.setState({过滤器:{...过滤器data_fine:矩(e.target.value).format('YYYY-MM-DD')}},this.filter)}/></表单>< span>< strong>普通版本</strong></span> br/><输入类型=日期"/></容器>
完整示例: https://codepen.io/anon/pen/GBdoQW >
第一个选择器与下面的简单选择器相同.第一个只获得一些语义CSS.
在Safari中尝试.它们只是常规的文本输入.:(
My application uses the Form.Input from Semantic UI React library to insert dates. It shows a date-picker on both Chrome and Firefox but not on Safari. I've tried to use the react-datepicker library, but it has different styling and it's difficult to align its inputs with the others from Semantic UI React's Forms. What can I do?
This is an example of Form.Input type that does not work on 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)
} />
Bad news.
Semantic UI React does not support the input date type.
What are you seeing in Chrome & Firefox is the default browser versions of input with type="date".
Input with type="date" is not supported in Safari.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Browser_compatibility
I tried Semantic UI React and 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>
Full example: https://codepen.io/anon/pen/GBdoQW
First picker is same as the plain one below. The first only gets some Semantic CSS.
Try in Safari. They are just regular text inputs. :(
这篇关于在Safari上使用React的Datepicker的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!