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) } /> 2 Answers
Answers 1
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. :(
Answers 2
You can try this cool date picker called 'react-dates' made by airbnb...
Github: airbnb / react-dates (for documentation)
Official Live Demo : click here
Code sandbox demo (made by me to help you get started) : https://codesandbox.io/s/l5oo5r4pxl
0 comments:
Post a Comment