美しいパッケージアリデザインフォーム時間選択コンポーネント

私は電話を提出したコンポーネントを選択し、日付を書くためにそれを使用することができるように、フォーム内のコンポーネントのコンポーネントアリ設計は、比較的小さな提出するために使用することができ、非常に簡単です。

コード：

1インポートフラグメントから{}、反応させ'REACT' ;
 2 'モーメント'瞬間からインポート;
 3。インポート日付ピッカー{、}入力から'antd' ;
 4。 エクスポートインタフェース{小道具
 5。      スタイル：？任意の、// スタイル
6。     デフォルト：？文字列| moment.Moment、// デフォルト値の
7は      ？形式：任意の、// フォーム
8      ？validationName：文字列、// 提出するメニューの名前を提出する
9      ？submitString：ブールを、// 文字列型に提出する
10      のフォーマット？：文字列、// 文字列の書式は、デフォルト値と値が提出さ
11 }
 12は、  
13であり、 状態インターフェイスエクスポート{
 14      DATE：| moment.Moment不定、// 選択された時間値、モーメントタイプ
15      ：文字列、dateVal // 選択された時間値、文字列型
16  }
 17   
18である React.Componentを拡張クラスmyDatePicker <小道具、ステート> {
 19      コンストラクタ（小道具：小道具）{
 20は         、スーパー（小道具）
 21であり         、この .STATE = { 
 22である              ：DATE TYPEOF  本。.props デフォルト？=== '文字列'モーメント（これ。.props デフォルト、この.props.format）：これは .props。デフォルト、
 23              dateVal：typeofを この .props。デフォルト === 'string'は？これは .props。デフォルト :( この .props。デフォルト ==未定義！？この .props。デフォルト .format（この .props.format）： '' ）、
 24          };
25      }
 26      のsetData =（モーメント：moment.Moment | ヌル、dateVal：列）=> {
 27          LET日：moment.Moment | 未定義;
28         もし（現在=== NULL ）{
 29              日= 未定義。
30          } 他{
 31              日= モーメント。
32          }
 33          この.setState（{日付、dateVal}）。
34      }
 35      ）（レンダリング{ 
 36          リターン（
 37              <フラグメント>
 38                  <日付ピッカー値= { この .state.dateは}のonChange = {（モーメント：moment.Moment | ヌル、dateVal：列）=>
 39                      { この.setData（瞬間、dateVal）}}スタイル= { この .props.style} />
 40                  {
 41                      本 .props.form！==未定義&& この .props.form.getFieldDecorator！==未定義？
42                      この .props.form.getFieldDecorator（この .props.validationName ==未定義！？この .props.validationName： '日付ピッカー' 、{
 43                          はinitialValue：この .props.submitString？この .state.dateVal：この.state.date 、
 44                        }）（<入力タイプ= "隠れた" />）
 45                      ：未定義
46                  }
 47              </フラグメント> 
 48           ）。
49      }
 50  }
 51輸出デフォルト myDatePicker。

コール：

 

効果：

 

 

 

 

 

 

あなたは、通常のページを呼び出すことができます。

 

 文字列型、選択した時間値を取得します。

 

 モーメントタイプ選択した時間の値を取得します。