Entering `01012021` produces a bad output

[bon-alexis]

Describe the bug A clear and concise description of what the bug is. When manually typing in 01012021 to the input field, it displays as follows:

To Reproduce Steps to reproduce the behavior:

1. Go to The Datepicker
2. Click on the text input
3. Manually type in "01012021"
4. Observe that the title displays "January 1012" instead of "January 2021"

Expected behavior A clear and concise description of what you expected to happen. The title should say "January 2021"

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] Mac OS
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 6.2.0

Additional context Add any other context about the problem here.

[barettjfed]

A work around that we implemented was setting strictParsing to true and then using the dateFormat prop to have the formats that we expected to get.

[hugoburguete]

@bon-alexis What date format did you use? I just tested it with ddMMyyyy and it displays the date as expected. If you have single digit date formats in either the day or month, that's probably the cause of the issue.

[bon-alexis]

@hugoburguete dateFormat="MM / dd / yyyy"

[hugoburguete]

@bon-alexis The repo maintainers can feel free to correct me but, as far as I can tell, the date you enter in the input needs to be formatted in the same way as the dateFormat. So, if you're entering a date, you should enter 01 / 01 / 2021, not 01012021 (which is logical, given that the input can't guess what input format the user types in. They could type in the year first for example). The package will try its best to guess what date you've entered, but for obvious and numerous reasons, it may not show the correct result.

[awg3]

Are there any updates to this issue, fixes or existing work arounds?

How to reproduce:

1. Go to: https://reactdatepicker.com/
2. Enter a date in the format "mmddyyyy" for example January 15, 2024 -> "01152024" and focus / tab / click out of the input field.
3. The string "0115202" will be parsed and used to populate the "YYYY" portion of the date field. Note that this string is the same as the desired "01152024" but without the "4". I assume that it trims the trailing 0 and makes a determination on how to format the date year.
4. The input field is updated with the value of "01/01/115202".

Input Result

[awg3]

I figured that you could use a mask in the date picker component, if for example you set it to be DD/MM/YYYY it will ensure that users avoid the issue of entering the date without the forward slash.

This can be further customized for internationalization on how your users enter dates based on their region, meaning: https://en.wikipedia.org/wiki/List_of_date_formats_by_country

Pseudocode without considering the user's region:

import MaskedInput from 'react-maskedinput';
// ...
return (
  <ReactDatePicker
    // ...
    customInput={<MaskedInput mask="11/11/1111" placeholder="test" />}
    mask={[/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/]}
    // ...
  />
);

Results in: Example: