Syncfusion Date Range Picker

Question

I am trying to prevent the user to edit the input text area by typing, allowing only changes made with the pop up calendar.... I followed the documentation but the property allowEdit is not working on my code

<DateRangePickerComponent
      cssClass="customCSS"          
      placeholder="Select date range"
      allowEdit= "false"
      onChange={this.dateRangeHandler}
    />

I am also finding not so easy to style this Date Picker...is inheriting all the style from his parent component so I need to customise every single bit of it...

score 0 · Answer 1 · edited Nov 16 '21 at 12:10

We need to define the allowEdit property with correct JSX syntax in the react platform to get rid of the reported issue.

<DateRangePickerComponent
cssClass="customCSS"
placeholder="Select date range"
allowEdit={false}
onChange={this.dateRangeHandler}
/>

Sample: https://stackblitz.com/edit/react-6jwtbf

Please refer the below documentation to know more about this.

How are boolean props used in React?

https://reactjs.org/docs/introducing-jsx.html

Syncfusion Date Range Picker

1 Answers1