Date Picker auto-completes with wrong date

[dnndev]

When attempting to enter a date, the date picker's input field gets auto-completed with the day and year.

Steps to Reproduce:

1. Add Date field to a data model
2. Set the type to date
3. Add a new record for that model.
4. TAB into the date field (this may not be necessary but is the step I took)
5. Type 08/ and wait. Field will auto-completed at this point.

Resulting Behavior

The input field gets auto-completed with 01/2001 for a full date of 08/01/2001. Further, if you try to delete the 2001 and pause, it will autocomplete to 2002.

Expected Behavior:

Nothing should happen.

Related Behavior

• Typing 0 into the field after tabbing into it and waiting will result in 01/01/2000
• After the auto-complete to 01/01/2000, deleting the final 0 and pausing will result in an auto-complete of 01/01/0200.

This is very frustrating for any user. Often by the time they find the proper number keys to type in the a full year like 2018, the input will have already auto-completed with an incorrect year of 2001, resulting in a date like 01/01/20012018

A sample can be seen in the animated GIF below. Any pause in typing results in the auto-complete. In this example, I typed 08/ and paused. Later I tried to delete the "bad" data, only to have the field auto-complete. The goal was to type in 08/09/2018.

[ventouris]

I have the same issue. Maybe also related to this. If you try to finish the whole date and press tab or click on another field, the date changes to something else and not the one you just typed. Same thing happens if you paste the date.

[abdonrd]

I have the same issue. Also when editing a saved date.

Any news?

[saadmb]

Any fix for this issue? Is there a workaround?
I'm considering to move from strapi because of the buggy DatePicker.

[soupette]

@saadmb right now I don't have a fix for this issue however there's a prop wait that you can pass to the DatePicker so you can adjust the time before the input starts the auto complete.

[lbell]

As long as we're on the subject, the date-picker could suffer several improvements beyond just being able to type in the date manually:

• Button to clear the currently entered date completely.
• Button to take you to "today's" date.
• Ability to change the year or month independently in the UI to quickly get to a date.

[matepaiva]

If I have to choose a date from 30 years ago, I would have to walk through it every month. Maybe a good workaround would be to have a fast way to change the year. For example, clicking on the year to change it.

[KeitelDOG]

Yes, Date Picker is not optimized for years ago. I think since it's open source, it might be easy to put a PR. Don't know which UI framework they use for inputs. We might find an advanced Date Picker like the one in Material UI labs.

[soupette]

We are planning on releasing a new one soon

[KeitelDOG]

@soupette great news. And if in the future there could be a possibility to replace any Input by a custom input that implements some event, that would be awesome. For the moment, the Date Picker improvement is enough.

[soupette]

There's already such feature in the Strapi admin panel, you can check out this guide you can easily adapt the guide by creating a date and datetime field with your custom input.
Let me know if it works for you

[KeitelDOG]

@soupette great, I didn't know. Thanks

[thomasync]

no news about this problem ?

[KeitelDOG]

@absmoca you can use custom component to replace the default one for the types provided by Strapi. https://strapi.io/blog/how-to-change-the-wysiwyg-in-strapi