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