React Native 日時セレクターコンポーネントの使用方法-jsチュートリアル-php.cn

React Native 日時セレクターコンポーネントの使用方法

php中世界最好的语言

リリース： 2018-06-01 17:30:47

オリジナル

1560 人が閲覧しました

今回は、React Native の日時選択コンポーネントの使い方と、React Native の日時選択コンポーネントを使用する際の注意事項について説明します。以下は実際のケースです。

React Native の日付と時刻の選択コンポーネント: React-native-datepicker は、Android と IOS のデュアルプラットフォームをサポートし、日付の独立した選択、時刻の独立した選択、日付と時刻の選択をサポートし、カスタム日付形式をサポートします。

レンダリング

インストールメソッド

npm install react-native-datepicker --save

ログイン後にコピー

サンプルコード

<Text style={styles.instructions}>time: {this.state.time}</Text>
    <DatePicker
     style={{width: 200}}
     date={this.state.datetime}
     mode="datetime"
     format="YYYY-MM-DD HH:mm"
     confirmBtnText="确定"
     cancelBtnText="取消"
     showIcon={false}
     onDateChange={(datetime) => {this.setState({datetime: datetime});}}
    />
    <Text style={styles.instructions}>datetime: {this.state.datetime}</Text>
    <DatePicker
     style={{width: 200}}
     date={this.state.datetime1}
     mode="datetime"
     format="YYYY-MM-DD HH:mm"
     confirmBtnText="确定"
     cancelBtnText="取消"
     customStyles={{
      dateIcon: {
       position: &#39;absolute&#39;,
       left: 0,
       top: 4,
       marginLeft: 0
      },
      dateInput: {
       marginLeft: 36
      }
     }}
     minuteInterval={10}
     onDateChange={(datetime) => {this.setState({datetime1: datetime});}}
    />
    <Text style={styles.instructions}>datetime: {this.state.datetime1}</Text>

ログイン後にコピー

date: 初期表示日付を設定します。 mode: 表示モード、日付、日時、 time format: 日付フォーマットを設定します。デフォルトは「YYYY-MM-DD」ですconfirmBtnText: OK ボタンの表示名 cancelBtnText: Cancel ボタンの表示名 minDate: 表示される最小の日付 maxDate: 表示される最大の日付期間:時間間隔 onDateChange: 変更時にトリガーされる日付 Event

プレースホルダー: プレースホルダー

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。推奨読書:

ページにアクセスして自動的に配置するための vue-baidu-map の作成方法

Vue2.0 を使用してカメラを呼び出して写真を撮る方法

以上がReact Native 日時セレクターコンポーネントの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。