web-dev-qa-db-fra.com

Datepicker avec React sur Safari

Mon application utilise la bibliothèque Form.Input from Semantic UI React pour insérer des dates. Il montre un sélecteur de date sur Chrome et Firefox, mais pas sur Safari. J'ai essayé d'utiliser la bibliothèque react-datepicker, mais elle a un style différent et il est difficile d'aligner ses entrées sur les autres de Semantic UI React's Forms. Que puis-je faire? 

Voici un exemple de type Form.Input qui ne fonctionne pas sur 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)
    } />
javascriptreactjsinputdatepickersemantic-ui
7
Luca Di Liello

Mauvaises nouvelles.

Interface utilisateur sémantique React ne prend pas en charge le type de date entré.

Qu'est-ce que vous voyez dans Chrome & Firefox sont les versions par défaut du navigateur d'entrée avec type = "date".

Les entrées de type = "date" ne sont pas prises en charge par Safari.

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

J'ai essayé l'interface sémantique Réagir et plaine côte à côte

  <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>

Exemple complet: https://codepen.io/anon/pen/GBdoQW

Le premier choix est le même que celui du dessous. Le premier ne reçoit que quelques CSS sémantiques.

Essayez dans Safari. Ce ne sont que des entrées de texte ordinaires. :(

8
Ty Kroll

Vous pouvez essayer ce sélecteur de date cool appelé 'réagir-dates' fabriqué par airbnb ...

Github: airbnb/react-dates (pour documentation)

Démo officielle en direct: cliquez ici

Code sandbox demo (créé par moi pour vous aider à démarrer): https://codesandbox.io/s/l5oo5r4pxl

6
Ashley Fernandes

Enfin, j'ai trouvé un nouveau projet qui implémente un DatePicker universel avec le style sémantique-ui-react.

Lien vers le référentiel GitHub

0
Luca Di Liello