web-dev-qa-db-ja.com

SafariでReact

私のアプリケーションは、 Semantic UI React ライブラリのForm.Inputを使用して日付を挿入します。 ChromeとFirefoxの両方で日付ピッカーが表示されますが、Safariでは表示されません。react-datepickerライブラリを使用しようとしましたが、スタイルが異なり、入力を調整するのが困難です。 Semantic UI Reactのフォームの他のユーザー。

これは、Safariでは機能しないForm.Inputタイプの例です。

<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

悪いニュース。

セマンティックUI Reactは入力日付タイプをサポートしていません。

Chrome＆Firefoxはtype = "date"の入力のデフォルトのブラウザバージョンです。

Type = "date"の入力は、Safariではサポートされていません。

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

セマンティックUI Reactとプレーンを並べて試してみました

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

完全な例： https://codepen.io/anon/pen/GBdoQW

最初のピッカーは、以下のプレーンなピッカーと同じです。最初のものはセマンティックCSSのみを取得します。

Safariでお試しください。これらは通常のテキスト入力です。 :(

9
Ty Kroll

Airbnb製の「react-dates」と呼ばれるこのクールな日付ピッカーを試すことができます...

Github： airbnb/react-dates （ドキュメント用）

公式ライブデモ： ここをクリック

コードサンドボックスデモ（開始を支援するために私が作成）： https://codesandbox.io/s/l5oo5r4pxl

7
Ashley Fernandes

最後に、semantic-ui-reactのスタイルでユニバーサルDatePickerを実装する新しいプロジェクトを見つけました。

GitHubリポジトリへのリンク

1
Luca Di Liello

私はnpmではなくyarnを使用していて、npmユーザー用のインストールドキュメントしか追加していないため、react-datesはかなり役に立たないことがわかりました。

比較的簡単に設定できる、react-day-picker、優れたドキュメントをお勧めします。

https://react-day-picker.js.org/

サファリブラウザの開発者がデフォルトのhtmldatepickerを追加していないのは本当にばかげています、これはブラウザの冗談です...

0
Pixelomo