Datepicker with React on Safari

Question

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

Answer 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. :(

Answer 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

Answer 3

Finally I found a new project that implements a universal DatePicker with the style of semantic-ui-react.

Link to the GitHub repository