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

Question

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')}} />
  }

Bhavani Mandapati · Accepted Answer · 2019-03-29T11:50:43.707

1

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')}} />

}

edited Mar 29 '19 at 11:50

answered Mar 29 '19 at 11:18

Bhavani Mandapati

207
2
11

Thanks. yes it's remove the readOnly property. but i get some errors once i try to type something. – Oshini Apr 01 '19 at 09:27
Error List: 1. The above error occurred in one of your React components: 2.Uncaught TypeError: this.state.start.isSameOrBefore is not a function 3. Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. – Oshini Apr 01 '19 at 09:39

score 1 · Answer 2 · answered Apr 05 '19 at 06:24

1

From "version": "2.0.1" the issue was fixed. using " input = {true}" property can enable manual date time entering

answered Apr 05 '19 at 06:24

Oshini

613
4
17

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

2 Answers2