fix(module:datepicker):date typing, enter behavior, overlay toggle

[anddrzejb]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• Bundle size optimization
• Performance optimization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

#1143
partially #215

💡 Background and solution

1. Regarding Datepicker component add a value on the month and day segments automatically #1143: during typing there was automatic casting to date. If it was successful, then that date was assumed. So the problem appeared when user typed only "2019-01" and because it was parsable to "2019-01-01", that value was assumed as correct date. If user wanted to enter for example "2019-01-12", than had to delete the extra values and try again. I added extra logic to handle detection of at least 3 segments. Last segment has to have at least 2 characters with first character being a digit. These conditions prevent from assuming date when a user enters "2019-01-1". However, if user decides to accept that value, then it will be parsed to whatever date the framework is going to detect. The only way to accept such value is to press Enter.
2. I added Enter key detection - if pressed, then whatever is in input, will be parsed to date. If it can be parsed, then that date is accepted. Otherwise, previous value is kept.
3. I added 2 more keys - arrow up (hides overlay), arrow down (opens overlay). This is a partial attempt on solving request coming from Is there the other behave for the datepicker control? #215.
4. For RangePicker I added focus detection to each input. This way when someone uses Tab / Ctrl + Tab to navigate the controls, the RangePicker will behave as expected (comparable to mouse).

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Changelog is provided or not needed

[ElderJames]

This is very nice.

But the operation of the keyboard is still a little issue.
When I use the tab key to switch to the right input box, the panel doesn't switch. Changing the value on the right side causes the left side to follow.

[anddrzejb]

I am not sure what you mean. You were expecting to see the focus on the right panel?

Because if that is the case, then this is different than react ant design which is like this (same as this PR):

I also notice react does not support enter, so we are improving 😏 .

One difference I noticed between blazor and react is that when second input is focused, blazor jumps to current date (that's the assumed value for nullable) but ant stays on the same position as already filled starting date. This is obviously valid only for situation when no values/defaults are supplied (at least intuitively, I have not checked what react does here). I still need to fix staying on the same date when no value/default value is provided. When clicked, this is working as expected, when pressed enter, it jumps to current default value.

[ElderJames]

I'm not sure, but I can't make it focus on the right panel with the tab key.

[anddrzejb]

I am sorry, but I do not understand what exactly you mean. Can you present in a gif form? Or maybe there is a different behaviour on your browser? What browser do you use? I tested this on Chrome, Edge and Firefox and I get consistent results.

[ElderJames]

I have try again and it ok now. 😂

[anddrzejb]

Oh, must be a form of a demo day 😂. Anyways, I will put some extra work later today to fix the defaults and push them here.

[anddrzejb]

@ElderJames ok, I think this is ready for merging.