今回は 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: 'absolute', 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 サイトの他の関連記事に注目してください。PopupWindow コンポーネントの使用手順分析の Vue 実装
vue+jquery+lodash スライド時の上部フローティング固定関数の詳細な説明
以上がReact Native の日時選択コンポーネントの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。