Hi. I’m getting odd behavior on a date field. When selecting the date with the date picker it’s fine. When inputting the date manually the date gets reformatted when I click outside the field.
I’m using the latest (as of now), version 3.7.3.
I have the following blueprint setup for a date field
test_date:
label: Test Date
type: date
display: MM/DD/YYYY
Here’s a quick video example showing the issue (click image to see animation).
Please advise.
It’s a problem with the display prop.
opened 05:09PM - 21 Mar 22 UTC
type: bug 🐛
## Description
Date fields using the M/D/YY format behave erratically when at… tempting to manually enter dates. Selecting a date from the datepicker appears to work as expected. However, typing a date in the field often -- but not always -- produces incorrect results. The outcome varies depending on how the user interacts with the field.
Let's say I have an "Event Date" field and I want to specify a date of April 20, 2022. I select the field and type "4/20/22". If I then press TAB, the display changes to "4/8/23" and the first digit ("4") is highlighted. If I press TAB again, the display changes to "8/4/23". Continuing to press TAB toggles the display between those two strings.
If you then use your mouse cursor to click outside the field, the value switches to the _opposite_ of whatever was displayed. That is, "4/8/23" becomes "8/4/23" and "8/4/23" becomes "4/8/23".
If you save the entry and the field displays "4/8/23", the value saved for the field is 2023-04-08. If you save the entry while the field displays "8/4/23", the value saved for the field is 2023-08-04.
Now consider a different date -- April 10, 2022. If you type "4/10/22" and press TAB, the display changes to "10/4/22". If you then click outside the field, the display changes back to "4/10/22". If you save at that point, the saved value is 2022-04-10. If you instead type "4/10/22" and click outside the field, the display changes to "10/4/22". If you save at that point, the saved value is 2022-10-04.
**Expected behavior**
I expect that typing a string into a date field with M/D/YY format will result in that value being displayed correctly in the field; that pressing TAB after typing the string will take me to the next field; and that clicking outside of the field will not cause the field's displayed value to change.
**Screenshots**
Initial field state:
Typing date in M/D/YY format:
After pressing TAB:
After pressing TAB again:
## To reproduce
1. Create a new date field like so:
```
event_date_test:
label: Sample Date Field
type: date
default: now
display: M/D/YY
```
2. Go to the Panel.
3. Tab to or click into the field.
4. Type "4/20/22" (April 20, 2022).
5. Press TAB.
6. Observe how the displayed value changes as described above.
7. Continue to press TAB and/or click outside the field and observe how the field (mis)behaves.
8. Save the entry at various points and observe in the content file how the saved value relates to the displayed value in the Panel.
9. Now type in "4/10/22" (April 10, 2022).
10. Press TAB.
11. Observe how the displayed value changes to "10/4/22".
12. Click outside the field. Observe how the displayed value changes back to "4/10/22".
13. Save the entry at various points and observe in the content file how the saved value relates to the displayed value in the Panel.
## Your setup
Kirby v3.6.2
**Console output**
N/A
**Your system**
- Device: Laptop
- OS: Windows 11
- Browser: Firefox
- Version: 98.0.1
**Additional context**
N/A
