improve date picker, allow inline button

client/src/components/DateRangePicker/index.js

@@ -73,17 +73,25 @@ class DateRangePicker extends Component {
 
     render() {
         const { startDate, endDate, error, startDateLabel, endDateLabel } = 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 ? 1 : null}>
+                { inlineButton && <label>{'\u00A0'}</label> }
+                <Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
+            </Grid.Column>
+        );
+
         return (
             <Form>
-                <Grid columns="equal">
+                <Grid stackable columns={inlineButton ? null : 'equals'}>
                     <Grid.Row>
-                        <Grid.Column>
+                        <Grid.Column width={inlineButton ? 7 : null}>
                             <label>{startDateLabel}</label>
                             <Form.Input
                                 fluid
@@ -93,7 +101,7 @@ class DateRangePicker extends Component {
                                 onChange={this.onStartDateChange.bind(this)}
                             />
                         </Grid.Column>
-                        <Grid.Column>
+                        <Grid.Column width={inlineButton ? 6 : null}>
                             <label>{endDateLabel}</label>
                             <Form.Input
                                 fluid
@@ -103,6 +111,9 @@ class DateRangePicker extends Component {
                                 onChange={this.onEndDateChange.bind(this)}
                             />
                         </Grid.Column>
+                        {
+                            inlineButton && buttonRender
+                        }
                     </Grid.Row>
                     { error &&
                         <Grid.Row>
@@ -114,11 +125,12 @@ class DateRangePicker extends Component {
                             </Grid.Column>
                         </Grid.Row>
                     }
-                    <Grid.Row>
-                        <Grid.Column>
-                            <Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
-                        </Grid.Column>
-                    </Grid.Row>
+                    {
+                        !inlineButton &&
+                        <Grid.Row>
+                            {buttonRender}
+                        </Grid.Row>
+                    }
                 </Grid>
             </Form>
         );

client/src/scenes/PracticeSummaryReport/index.js

@@ -52,7 +52,7 @@ class PracticeSummaryReport extends Component {
                             <MemberSelector onMemberSelect={this.onMemberSelectionUpdate.bind(this)} />
                         </Grid.Column>
                         <Grid.Column>
-                            <DateRangePicker onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
+                            <DateRangePicker inlineButton={true} onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
                         </Grid.Column>
                     </Grid.Row>
                     <Grid.Row>