how to use react-dates in reactjs properly

Question

import React, {Component} from 'react';



import {DateRangePicker, SingleDatePicker, DayPickerRangeController} from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

class Clients extends Component {
  constructor(props) {
    super(props);
    this.state = {
      focusedInput: '',
      startDate: '',
      endDate: ''
    };
    this.onDatesChange = this.onDatesChange.bind(this)
    this.onFocusChange = this.onFocusChange.bind(this)
  }
  onDatesChange({startDate, endDate}) {

    this.setState({startDate, endDate});
  }

  onFocusChange(focusedInput) {
    this.setState({focusedInput});
  }

  render() {
    const {focusedInput, startDate, endDate} = this.state;

    return (<div className="animated fadeIn">


      <div>
        <DateRangePicker
          onDatesChange={this.onDatesChange} 
          onFocusChange={this.onFocusChange}
          focusedInput={focusedInput}
          startDate={startDate}
           endDate={endDate}/></div>

    </div>);
  }
}

export default Clients;

the errors are : arning: Failed prop type: Invalid input type: startDate of type string supplied to DayPickerRangeController, expected object. in DayPickerRangeController (created by DateRangePicker) in DateRangePicker (created by withStyles(DateRangePicker)) in withStyles(DateRangePicker) (created by Clients) in div (created by Clients) in div (created by Clients) in Clients (created by Route) in Route (created by Full) in Switch (created by Full) in div (created by Container) in Container (created by Full) in main (created by Full) in div (created by Full) in div (created by Full) in Full (created by Route) in Route in Switch in Router (created by HashRouter) in HashRouter

this happens when i click on startdate to pick a date any help ?

try to use moment library, passing a new moment object to react-dates , moment(). Then you can asign the start date you need using moment. — Daniel Artola
– Daniel Artola, Commented Mar 1, 2018 at 14:18
install moment with npm or yarn ( npm i moment --save), import moment on your component, and render react-dates with startDate={moment()}. — Daniel Artola
– Daniel Artola, Commented Mar 1, 2018 at 14:36

Daniel Artola · Accepted Answer · 2018-03-01 15:29:56Z

3

The problem was solved using moment library to set startDate

installing moment:

 npm i moment --save
 yarn add moment

import moment at your component:

import moment from 'moment'

set startDate at react-dates with a moment object

startDate={moment()}

answered Mar 1, 2018 at 15:29

Daniel Artola

3293 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jadlmir Over a year ago

another question :

jadlmir Over a year ago

I need to have a key the use it when I change the date let's say I have multiple date range pickers how could I find which is what I have changed something like that onDatesChange({startDate, endDate , Key}) { this.setState({startDate, endDate}); }

Collectives™ on Stack Overflow

how to use react-dates in reactjs properly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related