CODEWITHSUNDEEP
reactjsdatepickermomentjsreact-day-picker
Isura Amarasinghe
Isura Amarasinghe

Reputation: 932

React Date-picker Specific Date range not working

I want to highlight specific date range (6 Days after selected date). I tried this one . but not working .what will be the solution ? Here is sample code that i refer 

import React from "react";
import moment from 'moment';
import DayPicker, { DateUtils } from "react-day-picker";

import "react-day-picker/lib/style.css";

export default class DisabledDays extends React.Component {

state = {
 from: null,
 to:null,
};

handleDayClick(e, day, modifiers) {
const range = DateUtils.addDayToRange(day, this.state);
   this.setState(range);
}
handleChange = (day) => {
console.log("newDate", day);
return this.setState({date: day});
}

render() {
 const { from, to} = this.state;
 // Add the `selected` modifier to the cell of the clicked day
 const modifiers = {
   //disabled: DateUtils.isPastDay,
   //selected: day => DateUtils.isSameDay(this.state.from, day),
   selected:day => DateUtils.isDayInRange(day, this.state)
 };

 return <DayPicker selected={this.state.startDate} enableOutsideDays modifiers={ modifiers } onDayClick={ this.handleChange }  minDate={moment()}  maxDate={moment().add(5, 'days')}
  placeholderText="Select a date between today and 5 days in the future" />;
 }
}

Upvotes: 0

Views: 7514

Answers (2)

Isura Amarasinghe
Isura Amarasinghe

Reputation: 932

Finally I solved it. Have to use moment js correctly .

import React from "react";
import moment from 'moment';
import DayPicker from "./DayPicker";
import DateUtils from "./DateUtils";
export default class DisabledDays extends React.Component {
  state = {
    from: null,
    to:null,
  };
  handleDayClick(e, day, modifiers) {
    var target = moment(day).add(6, 'day')._d;
    this.state.to=target
    this.state.from=day
    console.log(this.state)
    this.setState(this.state);
  }
  render() {
    const { from, to} = this.state;
    console.log(from+"-"+to)
    const modifiers = {
      selected:day => DateUtils.isDayInRange(day, {from:from,to:to})
    };
    return <DayPicker  enableOutsideDays modifiers={ modifiers } onDayClick={ this.handleDayClick.bind(this) }  minDate={moment()}  maxDate={moment().add(5, 'days')}
      placeholderText="Select a date between today and 5 days in the future" />;
  }
}

Upvotes: 1

Michael Rasoahaingo
Michael Rasoahaingo

Reputation: 1089

I have something that works bby using your handleDayClick()

import React from "react";
import moment from 'moment';
import DayPicker, {DateUtils} from "react-day-picker";

import "react-day-picker/lib/style.css";

export default class DisabledDays extends React.Component {

  state = {
    from: null,
    to: null,
  };

  handleDayClick = (e, day, modifiers) => {
    const range = DateUtils.addDayToRange(day, this.state);
    this.setState(range);
  }

  handleChange = (day) => {
    console.log("newDate", day);
    return this.setState({date: day});
  }

  render() {
    const {from, to} = this.state;
    // Add the `selected` modifier to the cell of the clicked day
    const modifiers = {
      //disabled: DateUtils.isPastDay,
      //selected: day => DateUtils.isSameDay(this.state.from, day),
      selected: day => DateUtils.isDayInRange(day, this.state)
    };

    return <DayPicker selected={this.state.startDate} enableOutsideDays modifiers={ modifiers }
                      onDayClick={ this.handleDayClick } minDate={moment()} maxDate={moment().add(5, 'days')}
                      placeholderText="Select a date between today and 5 days in the future"/>;
  }
}

Upvotes: 0

Related Questions