reactjsreact-datetime

How to enable manual range date time entering in react-datetime-range-picker?

What do i need to do enable manual date time entering? Because it's display as read only. but once set readOnly as false (input = {true}) it creates some errors

  import React, { Component } from "react";
  import DatetimeRangePicker from 'react-datetime-range-picker';

  class Test extends Component {

   <DatetimeRangePicker
     startDate= {this.state.startDate}
     endDate={this.state.endDate}
     onStartDateBlur={this.startDateBlurHandler}
     onEndDateBlur={this.endDateBlurHandler}
     timeFormat="HH:mm"
     dateFormat="DD/MM/YY"
     inputProps={{ placeholder: ('Enter Date')}} />
  }
Solution

  • By setting input property value as true we can enable manual enter input field. Below i will provide sample code as well as link so you can go through for more information https://www.npmjs.com/package/react-datetime-range-picker 

    <DatetimeRangePicker
 startDate= {this.state.startDate}
 endDate={this.state.endDate}
 onStartDateBlur={this.startDateBlurHandler}
 onEndDateBlur={this.endDateBlurHandler}
 input = {true}
 timeFormat="HH:mm"
 dateFormat="DD/MM/YY"
 inputProps={{ placeholder: ('Enter Date')}} />

    }