React component - DateRangePicker, select date from to

0 votes
165 views
added Dec 7, 2021 in React by lcjr First Warrant Officer (11,830 points)
 

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>
  );
}

}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...