Flow types and added .vscode folder to git ignore

.gitignore

@@ -25,3 +25,7 @@ yarn-error.log*
 
 #IntellijIDEA
 .idea
+
+
+# VSCode
+.vscode

src/components/Form/FormDatePicker.react.js

@@ -3,42 +3,101 @@
 import * as React from "react";
 
 import FormSelect from "./FormSelect.react";
+import FormInputGroup from "./FormInputGroup.react";
 
 type Props = {|
-  +children?: React.Node,
-  +className?: string,
+  children?: React.Node,
+  className?: string,
+  defaultDate: Date,
+  minYear: number,
+  maxYear: number,
+  format: string,
+  monthLabels: Array<string>,
+  onChange?: Function,
 |};
 
 type State = {|
-  selectedDate?: Date,
+  currentDate: Date,
 |};
 
+type ChangeTypes = "mm" | "yyyy" | "dd";
+
 class FormDatePicker extends React.PureComponent<Props, State> {
+  static defaultProps = {
+    monthLabels: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ],
+    minYear: 1897,
+    maxYear: new Date().getFullYear(),
+    format: "mm/dd/yyyy",
+    defaultDate: new Date(),
+  };
+
   state = {
     currentDate: new Date(),
   };
 
   // Set the default date from props
-  componentWillMount() {
+  componentWillMount(): void {
     const { defaultDate } = this.props;
     this.setState({ currentDate: defaultDate });
   }
 
+  // Handle date changes
+  _handleOnChange = (type: ChangeTypes, value: number): void => {
+    const { currentDate } = this.state;
+    const { onChange } = this.props;
+    const newDate: Date = new Date(currentDate);
+
+    // Change month
+    if (type === "mm") {
+      newDate.setMonth(value);
+    }
+
+    // Change day
+    if (type === "dd") {
+      newDate.setDate(value);
+    }
+
+    if (type === "yyyy") {
+      newDate.setFullYear(value);
+    }
+
+    this.setState({ currentDate: newDate }, () => {
+      onChange && onChange(this.state.currentDate);
+    });
+  };
+
   // Creates an array with numeric values from start to end
-  _range = (start, end) =>
+  _range = (start: number, end: number): Array<number> =>
     Array.from({ length: end + 1 - start }, (v, k) => k + start);
 
   // Renders the months select
-  _renderMonths = () => {
+  _renderMonths = (): React.Node => {
     const { currentDate } = this.state;
     const { monthLabels } = this.props;
+
+    const onChangeMonths = ({ target }) =>
+      this._handleOnChange("mm", target.value);
+
     return (
-      <FormSelect>
+      <FormSelect onChange={onChangeMonths}>
         {monthLabels &&
           monthLabels.map((name, index) => (
             <option
-              value={index + 1}
-              selected={currentDate.getMonth() === index + 1}
+              value={index}
+              selected={currentDate.getUTCMonth() === index}
             >
               {name}
             </option>
@@ -48,18 +107,23 @@ class FormDatePicker extends React.PureComponent<Props, State> {
   };
 
   // Renders the days select
-  _renderDays = () => {
+  _renderDays = (): React.Node => {
     const { currentDate } = this.state;
     const currentMonthDays = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
+      currentDate.getUTCFullYear(),
+      currentDate.getUTCMonth() + 1,
       0
     ).getDate();
     const daysRange = this._range(1, currentMonthDays);
+    const currentDay = currentDate.getUTCDate();
+
+    const onChangeDays = ({ target }) =>
+      this._handleOnChange("dd", target.value);
+
     return (
-      <FormSelect>
+      <FormSelect onChange={onChangeDays}>
         {daysRange.map(day => (
-          <option value={day} selected={currentDate.getDay() === day}>
+          <option value={day} selected={currentDay === day}>
             {day}
           </option>
         ))}
@@ -68,14 +132,19 @@ class FormDatePicker extends React.PureComponent<Props, State> {
   };
 
   // renderes the years select
-  _renderYears = () => {
+  _renderYears = (): React.Node => {
     const { minYear, maxYear } = this.props;
     const { currentDate } = this.state;
     const yearsRange = this._range(minYear, maxYear).reverse();
+    const currentYear = currentDate.getUTCFullYear();
+
+    const onChangeYears = ({ target }) =>
+      this._handleOnChange("yyyy", target.value);
+
     return (
-      <FormSelect>
+      <FormSelect onChange={onChangeYears}>
         {yearsRange.map(year => (
-          <option value={year} selected={currentDate.getFullYear() === year}>
+          <option value={year} selected={currentYear === year}>
             {year}
           </option>
         ))}
@@ -94,33 +163,14 @@ class FormDatePicker extends React.PureComponent<Props, State> {
 
     return (
       <div className={className}>
-        {formatSplit && formatSplit.map(type => dateComponents[type])}
+        <FormInputGroup>
+          {formatSplit && formatSplit.map(type => dateComponents[type])}
+        </FormInputGroup>
       </div>
     );
   }
 }
 
-FormDatePicker.defaultProps = {
-  monthLabels: [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ],
-  minYear: 1897,
-  maxYear: new Date().getFullYear(),
-  format: "dd/mm/yyyy",
-  defaultDate: new Date(),
-};
-
 FormDatePicker.displayName = "Form.DatePicker";
 
 export default FormDatePicker;

src/components/Form/FormSelect.react.js

@@ -3,14 +3,22 @@
 import * as React from "react";
 import cn from "classnames";
 
-type Props = {| +children?: React.Node, +className?: string |};
+type Props = {|
+  +children?: React.Node,
+  +className?: string,
+  +onChange?: Function,
+|};
 
-function FormSelect({ className, children }: Props): React.Node {
+function FormSelect({ className, children, onChange }: Props): React.Node {
   const classes = cn(
     { "form-control": true, "custom-select": true },
     className
   );
-  return <select className={classes}>{children}</select>;
+  return (
+    <select onChange={onChange} className={classes}>
+      {children}
+    </select>
+  );
 }
 
 FormSelect.displayName = "Form.Select";