senaduka/old-psihologija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve date picker layout

Browse Source
This commit is contained in:
Bilal Catic
2019-06-18 15:25:24 +02:00
parent 16a62b35de
commit e5e86163ea
1 changed files with 40 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
client/src/components/DateRangePicker/index.js
View File

@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import moment from 'moment';
import { Form, Message } from 'semantic-ui-react';
import { Form, Message, Grid } from 'semantic-ui-react';
import { defaultDateFormat } from '../../constants/constants';
@@ -81,31 +81,45 @@ class DateRangePicker extends Component {
return (
<Form>
<Form.Group widths="equal">
<Form.Input
fluid
required
label={startDateLabel}
type="date"
value={startDateValue}
onChange={this.onStartDateChange.bind(this)}
/>
<Form.Input
fluid
required
label={endDateLabel}
type="date"
value={endDateValue}
onChange={this.onEndDateChange.bind(this)}
/>
</Form.Group>
{ error &&
<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>
}
<Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
<Grid columns="equal">
<Grid.Row>
<Grid.Column>
<label>{startDateLabel}</label>
<Form.Input
fluid
required
type="date"
value={startDateValue}
onChange={this.onStartDateChange.bind(this)}
/>
</Grid.Column>
<Grid.Column>
<label>{endDateLabel}</label>
<Form.Input
fluid
required
type="date"
value={endDateValue}
onChange={this.onEndDateChange.bind(this)}
/>
</Grid.Column>
</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>
}
<Grid.Row>
<Grid.Column>
<Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Form>
);
}