Added new datepicker

Rafael Arenas Schuchowsky
1 parent eb7931b255
Showing 4 changed files with 39 additions and 5 deletions Show diff stats
imports/client/views/core/DatePicker.js
imports/client/views/core/validations.js
imports/client/views/org/admin/students/StudentForm.js
package.json
@@ -0,0 +1,34 @@
+import React, { Component, PropTypes } from 'react'
+import $ from 'jquery'
+import 'jquery-ui/ui/widgets/datepicker'
+
+class DatePicker extends Component {
+  componentDidMount() {
+    $('.datepicker').datepicker({
+      changeMonth: true,
+      changeYear: true,
+      showButtonPanel: true,
+      yearRange: '-116:+34',
+      dateFormat: 'dd/mm/yy'
+    });
+  }
+
+  render() {
+    return (
+      <input
+        type="text"
+        className="datepicker form-control"
+        placeholder="DD-MM-YYYY"
+        onChange={this.props.onChange}
+        value={this.props.value}
+      />
+    )
+  }
+}
+
+DatePicker.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+}
+
+export default DatePicker
 export const isRequired = (fieldName, value) => {
-  console.log('isRequired', fieldName, value)
   if (!value) {
     return fieldName ? `${fieldName} is required` : 'Required'
   }
@@ -6,7 +6,8 @@ import {
   FormControl,
   Button
 } from 'react-bootstrap'
-import DatePicker from 'react-bootstrap-date-picker'
+// import DatePicker from 'react-bootstrap-date-picker'
+import DatePicker from '../../../core/DatePicker'
 import Label from '../../../core/Label'
 import Stepper from '../../../core/Stepper'
 import ErrorLabel from '../../../core/ErrorLabel'
@@ -117,9 +118,8 @@ const StudentForm = props =&gt; (
               <DatePicker
                 id="dob"
                 value={props.getValue('dob')}
-                onChange={(value, formattedValue) => {
-                  props.setValue('dob', value)
-                  props.setValue('formattedDob', formattedValue)
+                onChange={(e) => {
+                  props.setValue('dob', e.target.value)
                 }}
               />
               {props.isSubmitted() && props.errors && props.errors.dob && (
@@ -69,6 +69,7 @@
     "csvtojson": "^1.1.4",
     "fs": "0.0.1-security",
     "jquery": "^2.2.4",
+    "jquery-ui": "^1.12.1",
     "jquery-validation": "^1.15.1",
     "lodash": "^4.17.4",
     "material-fabmenu": "0.0.1",
...	...	@@ -0,0 +1,34 @@
	1	+import React, { Component, PropTypes } from 'react'
	2	+import $ from 'jquery'
	3	+import 'jquery-ui/ui/widgets/datepicker'
	4	+
	5	+class DatePicker extends Component {
	6	+ componentDidMount() {
	7	+ $('.datepicker').datepicker({
	8	+ changeMonth: true,
	9	+ changeYear: true,
	10	+ showButtonPanel: true,
	11	+ yearRange: '-116:+34',
	12	+ dateFormat: 'dd/mm/yy'
	13	+ });
	14	+ }
	15	+
	16	+ render() {
	17	+ return (
	18	+ <input
	19	+ type="text"
	20	+ className="datepicker form-control"
	21	+ placeholder="DD-MM-YYYY"
	22	+ onChange={this.props.onChange}
	23	+ value={this.props.value}
	24	+ />
	25	+ )
	26	+ }
	27	+}
	28	+
	29	+DatePicker.propTypes = {
	30	+ value: PropTypes.string.isRequired,
	31	+ onChange: PropTypes.func.isRequired,
	32	+}
	33	+
	34	+export default DatePicker
...	...
1	1	export const isRequired = (fieldName, value) => {
2		- console.log('isRequired', fieldName, value)
3	2	if (!value) {
4	3	return fieldName ? `${fieldName} is required` : 'Required'
5	4	}
...	...
...	...	@@ -6,7 +6,8 @@ import {
6	6	FormControl,
7	7	Button
8	8	} from 'react-bootstrap'
9		-import DatePicker from 'react-bootstrap-date-picker'
	9	+// import DatePicker from 'react-bootstrap-date-picker'
	10	+import DatePicker from '../../../core/DatePicker'
10	11	import Label from '../../../core/Label'
11	12	import Stepper from '../../../core/Stepper'
12	13	import ErrorLabel from '../../../core/ErrorLabel'
...	...	@@ -117,9 +118,8 @@ const StudentForm = props => (
117	118	<DatePicker
118	119	id="dob"
119	120	value={props.getValue('dob')}
120		- onChange={(value, formattedValue) => {
121		- props.setValue('dob', value)
122		- props.setValue('formattedDob', formattedValue)
	121	+ onChange={(e) => {
	122	+ props.setValue('dob', e.target.value)
123	123	}}
124	124	/>
125	125	{props.isSubmitted() && props.errors && props.errors.dob && (
...	...
...	...	@@ -69,6 +69,7 @@
69	69	"csvtojson": "^1.1.4",
70	70	"fs": "0.0.1-security",
71	71	"jquery": "^2.2.4",
	72	+ "jquery-ui": "^1.12.1",
72	73	"jquery-validation": "^1.15.1",
73	74	"lodash": "^4.17.4",
74	75	"material-fabmenu": "0.0.1",
...	...