141 lines
4.8 KiB
JavaScript
141 lines
4.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import moment from 'moment';
|
|
|
|
import { Form, Message, Grid } from 'semantic-ui-react';
|
|
|
|
import { defaultDateFormat } from '../../constants/constants';
|
|
|
|
class DateRangePicker extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
const initialStartDate = props.startDate ? moment(props.startDate, defaultDateFormat) : moment().startOf('month');
|
|
let initialEndDate = props.endDate ? moment(props.endDate, defaultDateFormat) : moment();
|
|
|
|
if (initialStartDate > initialEndDate){
|
|
initialEndDate = initialStartDate.add(1, 'day');
|
|
}
|
|
|
|
this.state = {
|
|
startDate: initialStartDate,
|
|
endDate: initialEndDate,
|
|
error: null,
|
|
startDateLabel: props.startDateLabel || 'Start date',
|
|
endDateLabel: props.endDateLabel || 'End date',
|
|
};
|
|
}
|
|
|
|
onStartDateChange(event) {
|
|
const { endDate, startDateLabel, endDateLabel } = this.state;
|
|
|
|
const newStartDate = moment(event.target.value, defaultDateFormat);
|
|
if (newStartDate > endDate){
|
|
this.setState({
|
|
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;
|
|
|
|
if (onDatesUpdate){
|
|
onDatesUpdate({
|
|
startDate: startDate.format(defaultDateFormat),
|
|
endDate: endDate.format(defaultDateFormat),
|
|
});
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.onButtonClick();
|
|
}
|
|
|
|
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 ? 3 : null}>
|
|
{ inlineButton && <label>{'\u00A0'}</label> }
|
|
<Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
|
|
</Grid.Column>
|
|
);
|
|
|
|
return (
|
|
<Form>
|
|
<Grid stackable columns={inlineButton ? null : 'equal'}>
|
|
<Grid.Row>
|
|
<Grid.Column width={inlineButton ? 7 : null}>
|
|
<label>{startDateLabel}</label>
|
|
<Form.Input
|
|
fluid
|
|
required
|
|
type="date"
|
|
value={startDateValue}
|
|
onChange={this.onStartDateChange.bind(this)}
|
|
/>
|
|
</Grid.Column>
|
|
<Grid.Column width={inlineButton ? 6 : null}>
|
|
<label>{endDateLabel}</label>
|
|
<Form.Input
|
|
fluid
|
|
required
|
|
type="date"
|
|
value={endDateValue}
|
|
onChange={this.onEndDateChange.bind(this)}
|
|
/>
|
|
</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>
|
|
{buttonRender}
|
|
</Grid.Row>
|
|
}
|
|
</Grid>
|
|
</Form>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default DateRangePicker;
|