CODEWITHSUNDEEP
reactjs
jadlmir
jadlmir

Reputation: 505

how to use react-dates in reactjs properly

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 ?

Upvotes: 1

Views: 2370

Answers (1)

Daniel Artola
Daniel Artola

Reputation: 329

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

Upvotes: 3

Related Questions