0

Here is code snippet:

import React, { Component } from "react";
import moment from "moment";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { DateRangePicker } from "react-dates";
import { START_DATE, END_DATE } from "react-dates/constants";
        
export default class Dates extends Component {
        state = {
        startDate: null,
        endDate: null,
        focusedInput: null
    };
        
    //setting up the value on change event
          onDatesChange = ({ startDate, endDate }) =>
            this.setState({ startDate, endDate });
        
          onFocusChange = focusedInput => this.setState({ focusedInput });
        
          isOutsideRange = day =>
            day.isAfter(this.startDate);
        
          render() {
            const { startDate, endDate, focusedInput } = this.state;
        //returning a datepicker range selector 
            return (
              <DateRangePicker
                startDate={startDate}
                startDateId={START_DATE}
                endDate={endDate}
                endDateId={END_DATE}
                onDatesChange={this.onDatesChange}
                focusedInput={focusedInput}
                onFocusChange={this.onFocusChange}
                minDate={moment('10-02-1999')}
                maxDate={moment().subtract(29, 'days')}
                noBorder={true}
          isOutsideRange={this.isOutsideRange}
              />
            );
          }
        }
    

Here is ui for calender

I have try to add min and max date props but still not able to apply a validation to allow a user to select start date (02-Mar-2023) and based on next 30 days. user only be able to select end date between (02-03-2023 to 02-04-2023).

like start date : 24-04-2023 to end date :24-04-2023 Start date: 20-04-2023 to end date : 24-04-2023. also use is allow to select any past date as start date like : start date : 14-01-2023 to end date : 14-02-2023

0 Answers0