I am using React date-picker for my form. Currently it's working well, but the user can delete the date and enter whatever values. How do I restrict it?
This is my code:
import DatePicker from "react-datepicker";
<DatePicker
name="invoiceDate"
className="form-control form-control-sm"
type="text"
size="sm"
placeholder=""
selected={date}
minDate={new Date()}
value={values.setDate}
onChange={datePickerChange}
dateFormat="dd/MM/yyyy"
/>
Just add this line of code to DatePicker
:
onKeyDown={(e) => {
e.preventDefault();
}}
After adding this event
your component's code will be same as bellow:
<DatePicker
name="invoiceDate"
className="form-control form-control-sm"
type="text"
size="sm"
placeholder=""
selected={date}
minDate={new Date()}
value={values.setDate}
onChange={datePickerChange}
dateFormat="dd/MM/yyyy"
onKeyDown={(e) => {
e.preventDefault();
}}
/>
Here's the executable code:https://codesandbox.io/s/patient-silence-ybz45?file=/src/App.js
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.