webentwicklung-frage-antwort-db.com.de

Datepicker mit React auf Safari

Meine Anwendung verwendet die Bibliothek Form.Input aus der Bibliothek Semantic UI React , um Datumsangaben einzufügen. Es zeigt eine Datumsauswahl in Chrome und Firefox, jedoch nicht in Safari. Ich habe versucht, die React-Datepicker-Bibliothek zu verwenden, aber sie hat ein anderes Design und es ist schwierig, ihre Eingaben an die anderen von Semantic UI Reacts Forms anzupassen. Was kann ich machen? 

Dies ist ein Beispiel des Typs Form.Input, der in Safari nicht funktioniert.

<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)
    } />
7
Luca Di Liello

Schlechte Nachrichten.

Semantic UI React unterstützt den Typ des Eingabedatums nicht.

Was Sie in Chrome und Firefox sehen, sind die Standard-Browserversionen der Eingabe mit type = "date".

Die Eingabe mit type = "date" wird in Safari nicht unterstützt.

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

Ich habe Semantic UI React ausprobiert und nebeneinander

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

Vollständiges Beispiel: https://codepen.io/anon/pen/GBdoQW

Der erste Picker ist derselbe wie der einfache darunter. Der erste bekommt nur etwas semantisches CSS.

Versuchen Sie es in Safari. Sie sind nur normale Texteingaben. :(

8
Ty Kroll

Sie können diesen coolen Date-Picker mit dem Namen "Reakt-Datum" von airbnb ausprobieren ...

Github: airbnb/reaktionsdaten (zur Dokumentation)

Offizielle Live-Demo: hier klicken

Code-Sandbox-Demo (von mir erstellt, um Ihnen den Einstieg zu erleichtern): https://codesandbox.io/s/l5oo5r4pxl

6

Schließlich fand ich ein neues Projekt, das einen universellen DatePicker im Stil von Semantic-Ui-React implementiert.

Link zum GitHub-Repository

0
Luca Di Liello