155 lines
7.0 KiB
JavaScript
Executable File
155 lines
7.0 KiB
JavaScript
Executable File
import React from 'react';
|
||
import DatePicker, { setDefaultLocale } from 'react-datepicker';
|
||
import moment from 'moment';
|
||
|
||
import {
|
||
Container,
|
||
Row,
|
||
Card,
|
||
Col,
|
||
CardBody
|
||
} from './../../../components';
|
||
import { Example, ButtonInput, AddonInput } from './components';
|
||
|
||
import { HeaderMain } from "../../components/HeaderMain";
|
||
|
||
setDefaultLocale('en');
|
||
|
||
export class DatePickerExamples extends React.Component {
|
||
state = {
|
||
startDate: moment().toDate(),
|
||
endDate: moment().add(5, 'days').toDate()
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<Container>
|
||
<HeaderMain
|
||
title="Date Picker"
|
||
className="mb-5 mt-4"
|
||
/>
|
||
<p className="mb-4">
|
||
You’ll need to install React, PropTypes, and Moment.js separately since those dependencies
|
||
aren’t included in the package. Below is a simple example of how to use the Datepicker in a React view.
|
||
You will also need to require the CSS file from this package (or provide your own).
|
||
The example below shows how to include the CSS from this package if your build system supports
|
||
requiring CSS files (Webpack is one that does).
|
||
</p>
|
||
<Row>
|
||
<Col lg={ 4 }>
|
||
{ /* START Card */}
|
||
<Card className="mb-3">
|
||
<CardBody>
|
||
<Example
|
||
title="Default"
|
||
no="1.01"
|
||
exampleInput={(
|
||
<DatePicker
|
||
customInput={ <ButtonInput /> }
|
||
selected={this.state.startDate}
|
||
onChange={this._handleChangeStart}
|
||
/>
|
||
)}
|
||
>
|
||
{
|
||
'<DatePicker\n' +
|
||
' selected={this.state.startDate}\n' +
|
||
' onChange={this._handleChange}\n' +
|
||
'/>'
|
||
}
|
||
</Example>
|
||
</CardBody>
|
||
</Card>
|
||
{ /* END Card */}
|
||
{ /* START Card */}
|
||
<Card className="mb-3">
|
||
<CardBody>
|
||
<Example
|
||
title="Inline"
|
||
no="1.02"
|
||
exampleInput={(
|
||
<DatePicker
|
||
inline
|
||
selected={this.state.startDate}
|
||
onChange={this._handleChangeStart}
|
||
/>
|
||
)}
|
||
>
|
||
{
|
||
'<DatePicker\n' +
|
||
' inline\n' +
|
||
' selected={this.state.startDate}\n' +
|
||
' onChange={this._handleChange}\n' +
|
||
'/>'
|
||
}
|
||
</Example>
|
||
</CardBody>
|
||
</Card>
|
||
{ /* END Card */}
|
||
</Col>
|
||
<Col lg={ 8 }>
|
||
{ /* START Card */}
|
||
<Card>
|
||
<CardBody>
|
||
<Example
|
||
title="Range"
|
||
no="1.03"
|
||
exampleInput={(
|
||
<div className="d-flex">
|
||
<DatePicker
|
||
customInput={ <AddonInput /> }
|
||
selected={this.state.startDate}
|
||
selectsStart
|
||
startDate={this.state.startDate}
|
||
endDate={this.state.endDate}
|
||
onChange={this._handleChangeStart}
|
||
/>
|
||
|
||
<DatePicker
|
||
className="ml-2"
|
||
customInput={ <AddonInput /> }
|
||
selected={this.state.endDate}
|
||
selectsEnd
|
||
startDate={this.state.startDate}
|
||
endDate={this.state.endDate}
|
||
onChange={this._handleChangeEnd}
|
||
/>
|
||
</div>
|
||
)}
|
||
>
|
||
{
|
||
'<DatePicker\n' +
|
||
' selected={this.state.startDate}\n' +
|
||
' selectsStart\n' +
|
||
' startDate={this.state.startDate}\n' +
|
||
' endDate={this.state.endDate}\n' +
|
||
' onChange={this.handleChangeStart}\n' +
|
||
'/>\n' +
|
||
'\n' +
|
||
'<DatePicker\n' +
|
||
' selected={this.state.endDate}\n' +
|
||
' selectsEnd\n' +
|
||
' startDate={this.state.startDate}\n' +
|
||
' endDate={this.state.endDate}\n' +
|
||
' onChange={this.handleChangeEnd}\n' +
|
||
'/>\n'
|
||
}
|
||
</Example>
|
||
</CardBody>
|
||
</Card>
|
||
{ /* END Card */}
|
||
</Col>
|
||
</Row>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
_handleChangeStart = (startDate) => (
|
||
this.setState({ startDate })
|
||
)
|
||
|
||
_handleChangeEnd = (endDate) => (
|
||
this.setState({ endDate })
|
||
)
|
||
}
|