React tutorial (9)

Datetime Picker も使用頻度が高い、というよりもほとんどマストなので記事をひとつ追加します。 Bootstrap 風のデザインの react-datetime を最後に紹介します。

github.com

この他にも airbnb/react-dates など沢山モジュールがありますので、各自でいろいろ試すと良いと思います。

依存モジュールを追加

npm install --save moment react-datetime

修正箇所

git diff src/components/Form.js

 import React, { Component } from 'react'
 import { Field, reduxForm } from 'redux-form'
+
 import Select from 'react-select'
 import 'react-select/dist/react-select.css'
 
+import "react-datetime/css/react-datetime.css"
+import DateTime from 'react-datetime'
+
 export const renderField = ({ input, label, type, meta: { touched, error } }) => (
   <div className="form-group">
     <label htmlFor={label}>{label}</label>
@@ -52,3 +56,14 @@ export const renderSelectMultiField = ({ input, label, options, meta: { touched,
     </div>
   )
 }
+
+export const renderDatePickerField = ({ input, label, meta: { touched, error } }) => (
+  <div>
+    <div className="form_label">{label}</div>
+    <div className="textarea_icon">
+      <DateTime value={input.value} onChange={param => input.onChange(param)} dateFormat={"YYYY/MM/DD"} timeFormat={false} />
+    </div>
+    <p className="text-danger">{touched && (error && <span>{error}</span>)}</p>
+  </div>
+)
+

git diff src/containers/CreatePost.js

 import { connect } from 'react-redux'
 import { Field, reduxForm } from 'redux-form'
 import { createPost } from '../actions'
-import { renderField, renderTextAreaField, renderSelectField, renderSelectMultiField } from '../components/Form'
+import { renderField, renderTextAreaField, renderSelectField, renderSelectMultiField, renderDatePickerField } from '../components/Form'

まとめ

という事で、この Tutorial を一通りやってみると、もしかすると SPA を React.js で書けるようになる気がします。なるといいですね。