Example of component usage as follows:
import { DateRangePicker } from 'react-dates';
class LocationScanListingFilterComponent extends React.Component {
onDatesChange = ({ startDate, endDate }) => {
this.setState({ startDate, endDate });
const sDate =
startDate !== null ? moment(startDate).format('YYYY-MM-DD') : null;
const eDate =
endDate !== null ? moment(endDate).format('YYYY-MM-DD') : null;
// if (sDate !== null && eDate !== null) {
const { onDateChange } = this.context;
onDateChange(sDate, eDate);
};
return (
<div className="classhere">
<DateRangePicker
startDateId="startDate"
endDateId="endDate"
initialVisibleMonth={() => moment().subtract(1, 'month')}
displayFormat="DD MMM YYYY"
calendarInfoPosition="top"
verticalSpacing={0}
readOnly={true}
hideKeyboardShortcutsPanel={true}
renderCalendarInfo={this.renderDatePresets}
startDate={contextdatefrom}
endDate={contextdateto}
onDatesChange={({ startDate, endDate }) => {
this.onDatesChange({ startDate, endDate });
}}
// onDatesChange={({ startDate, endDate }) => { this.setState({ startDate, endDate }, () => { this.handleDateChange(startDate, endDate)})}}
focusedInput={this.state.focusedInput}
onFocusChange={focusedInput => {
this.setState({ focusedInput });
}}
isOutsideRange={() => false}
// showClearDates
/>
</div>
);
}
}