need to stop autocorrect function when the date is invalid

[alan-anchen]

Is your feature request related to a problem? Please describe.
We need input date manually and allow the invalid date displaying(we will give validation message but not autocorrect)

Describe the solution you'd like
Provide a property to control autocorrect function.

Describe alternatives you've considered

Additional context

[NikolaStanisavljevic]

• 1 on this. So far soulution is to disable it with
  onChangeRaw={e => e.preventDefault()}
  But then you can't insert your own custom validation for invalid input if that event is disabled

[alan-anchen]

• 1 on this. So far soulution is to disable it with
  onChangeRaw={e => e.preventDefault()}
  But then you can't insert your own custom validation for invalid input if that event is disabled

Yes, the trouble is that we need to input manually.

[NikolaStanisavljevic]

Workaround that could help is to do custom validation onChangeRaw, and add another check for invalid date onBlur, and if so it will reset field and show error. Pseudo code:

<DatePicker onChange={onChange} onBlur={(event) => customBlur(event, onChange)} onChangeRaw={(event) => { customValidation(event); }} dateFormat={format} placeholderText={placeholder} className="form-control" />

[alan-anchen]

Workaround that could help is to do custom validation onChangeRaw, and add another check for invalid date onBlur, and if so it will reset field and show error. Pseudo code:

<DatePicker onChange={onChange} onBlur={(event) => customBlur(event, onChange)} onChangeRaw={(event) => { customValidation(event); }} dateFormat={format} placeholderText={placeholder} className="form-control" />

But we should stop the autocorrect function, because the autocorrent date is not the one that the user wanted.

[NikolaStanisavljevic]

Yes, but there is no way to stop it. Instead i let it happen and immediately after reset field to empty and show error that invalid date is entered.

…

On Wed, Mar 3, 2021, 09:45 alan-anchen ***@***.***> wrote: Workaround that could help is to do custom validation onChangeRaw, and add another check for invalid date onBlur, and if so it will reset field and show error. Pseudo code: <DatePicker onChange={onChange} onBlur={(event) => customBlur(event, onChange)} onChangeRaw={(event) => { customValidation(event); }} dateFormat={format} placeholderText={placeholder} className="form-control" /> But we should stop the autocorrect function, because the autocorrent date is not the one that the user wanted. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2756 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHZS6WL4GOTYSYJRMJUMBWLTBXZLPANCNFSM4X77HKVQ> .

[alan-anchen]

This just is the trouble.

[replaystudiosgames]

Is your feature request related to a problem? Please describe.
We need input date manually and allow the invalid date displaying(we will give validation message but not autocorrect)

Describe the solution you'd like
Provide a property to control autocorrect function.

Describe alternatives you've considered

Additional context

Hi,
I solved this problem using customInput property.
I created my own custom component as a Datepicker wrapper. In it I used a simple button as customInput. Doing so, I could open calendar just clicking on that button (in my case i used a button styled with a font awesome calendar icon).
Furthermore i created an input type="text" to manage date text.
You only have to manage "selected" and "onChange" properties.
Set as "selected" the date you saved in your internal state and set as "onChange" a function that changes that state based on what date you selected in your calendar.

This will allow you to manage data selection and to set text into a input type="text".

Almost done! To let user type in the input type="text" and to let datepicker know you changed the date, you need to manage the onChange event of the input type="text".
In this function, you need to check text validity (if it's a valid date or not) and then set your date as internal state (the same state set as "selected" property).

Pseudo code to help you understand better:
`
const DatepickerWrapper = () => {
// save date state
const [date, setDate] = useState();

const renderInputText = () => {
// render your input type text
return
}
function onChangeText(text) {
// check if text set in input type text is a valid date
if(isValidDate) {
setDate(new Date(text));
}
}

const renderCustomInput= (props, ref) => (
// render button with calendar icon
// do not forget this ref or calendar won't open. Check customInput section in documentation

// render button with icon
} // do not forget this forwardRef or calendar won't open. Check customInput section in documentation const DatepickerCalendarButton = forwardRef(renderCustomInput);
const onDatepickerChange = (value) => {
// check if text set in input type text is a valid date
if(isValidDate) {
setDate(new Date(text));
}
}
return (
<DatePicker
selected={date}
onChange={value => onDatepickerChange(value)}
customInput={}
/>
);
}`

Further suggestion: i also checked text in input type="text" length and property "strictParsing" to reach the behave you are asking for.

Hope this could help.

[alan-anchen]

if(isValidDate) {
setDate(new Date(text));
}

Thanks for your help! Actually, I had implemented it as the same way you provided before, but encountered another problem. Anyway, this is a good solution. Thanks again!