Mo Elzubeir
119 lines
3.4 KiB
JavaScript
119 lines
3.4 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { DateRangePicker } from 'react-dates'
|
|
import moment from 'moment'
|
|
import { getMomentObject } from '../../../../../../common/helper'
|
|
|
|
export class BetweenDatepickers extends React.Component {
|
|
state = {}
|
|
|
|
static propTypes = {
|
|
chosenSearchInterval: PropTypes.string.isRequired,
|
|
chosenStartDate: PropTypes.string.isRequired,
|
|
chosenEndDate: PropTypes.string.isRequired,
|
|
setSearchInterval: PropTypes.func.isRequired,
|
|
setSearchDate: PropTypes.func.isRequired,
|
|
setStartDate: PropTypes.func.isRequired,
|
|
minDate: PropTypes.object,
|
|
setEndDate: PropTypes.func.isRequired
|
|
}
|
|
|
|
swapDate = (startDate, endDate) => {
|
|
if (startDate.isAfter(endDate)) {
|
|
const temp = startDate
|
|
startDate = endDate
|
|
endDate = temp
|
|
}
|
|
return { startDate, endDate }
|
|
}
|
|
/*
|
|
setDates = (date, isStartDate) => {
|
|
const {
|
|
chosenStartDate,
|
|
chosenEndDate,
|
|
setStartDate,
|
|
setEndDate,
|
|
setSearchDate
|
|
} = this.props
|
|
|
|
const hasStartDate = !!chosenStartDate
|
|
const hasEndDate = !!chosenEndDate
|
|
let startDate = hasStartDate ? moment(chosenStartDate) : moment()
|
|
let endDate = hasEndDate ? moment(chosenEndDate) : moment()
|
|
|
|
startDate = isStartDate ? date : startDate
|
|
endDate = !isStartDate ? date : endDate
|
|
|
|
const swappedDate = this.swapDate(startDate, endDate)
|
|
startDate = swappedDate.startDate.format('YYYY-MM-DD')
|
|
endDate = swappedDate.endDate.format('YYYY-MM-DD')
|
|
|
|
setStartDate(startDate.format('YYYY-MM-DD'))
|
|
setEndDate(endDate.format('YYYY-MM-DD'))
|
|
|
|
const endDateLabel = hasEndDate ? endDate : 'now'
|
|
const startDateLabel = hasStartDate ? startDate : 'until'
|
|
let label = isStartDate
|
|
? `${startDate} - ${endDateLabel}`
|
|
: `${startDateLabel} - ${endDate}`
|
|
setSearchDate(label)
|
|
} */
|
|
|
|
setBetweenInterval = () => {
|
|
const { chosenSearchInterval, setSearchInterval } = this.props
|
|
if (chosenSearchInterval === 'between') return false
|
|
|
|
setSearchInterval('between')
|
|
}
|
|
|
|
handleDateChange = ({ startDate, endDate }) => {
|
|
const { setStartDate, setEndDate } = this.props
|
|
|
|
setStartDate(startDate ? startDate.format('YYYY-MM-DD') : null)
|
|
setEndDate(endDate ? endDate.format('YYYY-MM-DD') : null)
|
|
|
|
if (startDate && endDate) {
|
|
this.setBetweenInterval()
|
|
}
|
|
}
|
|
|
|
onFocusChange = (focus) => {
|
|
this.setState({ focusedInput: focus })
|
|
}
|
|
|
|
isOutsideRange = (date) => {
|
|
const today = moment()
|
|
return date.isAfter(today) || date.isBefore(this.props.minDate)
|
|
}
|
|
|
|
render() {
|
|
const { chosenStartDate, chosenEndDate } = this.props
|
|
const today = moment()
|
|
const startDate = getMomentObject(chosenStartDate)
|
|
const endDate = getMomentObject(chosenEndDate)
|
|
|
|
return (
|
|
<div className="ml-3">
|
|
<DateRangePicker
|
|
startDateId="startDate"
|
|
endDateId="endDate"
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
onDatesChange={this.handleDateChange}
|
|
focusedInput={this.state.focusedInput}
|
|
onFocusChange={this.onFocusChange}
|
|
displayFormat="MM/DD/YYYY"
|
|
startDatePlaceholderText="Start Date"
|
|
endDatePlaceholderText="End Date"
|
|
numberOfMonths={1}
|
|
maxDate={today}
|
|
// eslint-disable-next-line react/jsx-no-bind
|
|
isOutsideRange={this.isOutsideRange}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default BetweenDatepickers
|