implement month and year selection instead of date range

client/src/components/MonthSelector/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import moment from 'moment';
 
-import { Form, Message, Grid } from 'semantic-ui-react';
+import { Form, Grid } from 'semantic-ui-react';
 
 import { defaultDateFormat } from '../../constants/constants';
 
@@ -9,60 +9,38 @@ class MonthSelector extends Component {
     constructor(props) {
         super(props);
 
-        const initialStartDate = props.startDate ? moment(props.startDate, defaultDateFormat) : moment().startOf('month');
+        const initialDateTime = moment();
-        let initialEndDate = props.endDate ? moment(props.endDate, defaultDateFormat) : moment();
+        const initialMonth = (initialDateTime.month() === 0) ? 11 : initialDateTime.month() - 1;
-
+        const initialYear = (initialDateTime.month() === 0) ? initialDateTime.year() - 1 : initialDateTime.year();
-        if (initialStartDate > initialEndDate){
-            initialEndDate = initialStartDate.add(1, 'day');
-        }
 
         this.state = {
-            startDate: initialStartDate,
+            month: initialMonth,
-            endDate: initialEndDate,
+            year: initialYear,
-            error: null,
+            monthLabel: props.monthLabel || 'Month',
-            startDateLabel: props.startDateLabel || 'Start date',
+            yearLabel: props.yearLabel || 'Year',
-            endDateLabel: props.endDateLabel || 'End date',
         };
     }
 
-    onStartDateChange(event) {
+    onMonthSelectionChange = (event, data) => {
-        const { endDate, startDateLabel, endDateLabel } = this.state;
+        const newMonthValue = data.value;
+        this.setState({month: newMonthValue});
+    };
 
-        const newStartDate = moment(event.target.value, defaultDateFormat);
+    onYearChange = (event) => {
-        if (newStartDate > endDate){
+        const newYearValue = event.target.value ? parseInt(event.target.value) : this.state.year;
-            this.setState({
+        this.setState({year: newYearValue});
-                error: `${startDateLabel} cannot be after ${endDateLabel}`
+    };
-            });
-            return;
-        }
-        this.setState({startDate: newStartDate, error: null});
-    }
-
-    onEndDateChange(event) {
-        const { startDate, startDateLabel, endDateLabel } = this.state;
-
-        const newEndDate = moment(event.target.value, defaultDateFormat);
-        if (newEndDate < startDate){
-            this.setState({
-                error: `${startDateLabel} cannot be after ${endDateLabel}`
-            });
-            return;
-        }
-        this.setState({endDate: newEndDate, error: null});
-    }
-
-    onDismiss() {
-        this.setState({error: null});
-    }
 
     onButtonClick() {
         const { onDatesUpdate } = this.props;
-        const { startDate, endDate } = this.state;
+        const { month, year } = this.state;
+
+        const monthYearMoment = moment().month(month).year(year);
 
         if (onDatesUpdate){
             onDatesUpdate({
-                startDate: startDate.format(defaultDateFormat),
+                startDate: monthYearMoment.clone().startOf('month').format(defaultDateFormat),
-                endDate: endDate.format(defaultDateFormat),
+                endDate: monthYearMoment.clone().endOf('month').format(defaultDateFormat),
             });
         }
     }
@@ -72,14 +50,11 @@ class MonthSelector extends Component {
     }
 
     render() {
-        const { startDate, endDate, error, startDateLabel, endDateLabel } = this.state;
+        const { month, year, monthLabel, yearLabel } = this.state;
         const { inlineButton } = this.props;
 
         const buttonLabel = this.props.buttonLabel || 'Save';
 
-        const startDateValue = startDate.format(defaultDateFormat);
-        const endDateValue = endDate.format(defaultDateFormat);
-
         const buttonRender = (
             <Grid.Column width={inlineButton ? 3 : null}>
                 { inlineButton && <label>{'\u00A0'}</label> }
@@ -87,44 +62,49 @@ class MonthSelector extends Component {
             </Grid.Column>
         );
 
+        const monthDropdownOptions = [
+            {value: 0, text: 'January'},
+            {value: 1, text: 'February'},
+            {value: 2, text: 'March'},
+            {value: 3, text: 'April'},
+            {value: 4, text: 'May'},
+            {value: 5, text: 'June'},
+            {value: 6, text: 'July'},
+            {value: 7, text: 'August'},
+            {value: 8, text: 'September'},
+            {value: 9, text: 'October'},
+            {value: 10, text: 'November'},
+            {value: 11, text: 'December'},
+        ];
+
         return (
             <Form>
                 <Grid stackable columns={inlineButton ? null : 'equal'}>
                     <Grid.Row>
                         <Grid.Column width={inlineButton ? 7 : null}>
-                            <label>{startDateLabel}</label>
+                            <label>{monthLabel}</label>
-                            <Form.Input
+                            <Form.Dropdown
+                                options={monthDropdownOptions}
                                 fluid
-                                required
+                                selection
-                                type="date"
+                                defaultValue={month}
-                                value={startDateValue}
+                                onChange={this.onMonthSelectionChange}
-                                onChange={this.onStartDateChange.bind(this)}
                             />
                         </Grid.Column>
                         <Grid.Column width={inlineButton ? 6 : null}>
-                            <label>{endDateLabel}</label>
+                            <label>{yearLabel}</label>
                             <Form.Input
                                 fluid
                                 required
-                                type="date"
+                                type="number"
-                                value={endDateValue}
+                                value={year}
-                                onChange={this.onEndDateChange.bind(this)}
+                                onChange={this.onYearChange}
                             />
                         </Grid.Column>
                         {
                             inlineButton && buttonRender
                         }
                     </Grid.Row>
-                    { error &&
-                        <Grid.Row>
-                            <Grid.Column>
-                                <Message color="orange" onDismiss={this.onDismiss.bind(this)}>
-                                    <Message.Header>Wrong date</Message.Header>
-                                    <p><b>{startDateLabel}</b> has to be before <b>{endDateLabel}</b></p>
-                                </Message>
-                            </Grid.Column>
-                        </Grid.Row>
-                    }
                     {
                         !inlineButton &&
                         <Grid.Row>