Date field revamp

[jomarmontuya]

closes #2414

• Check with andres if timestamp is needed
• Better approach on getting the zesty-orange background
• Deployment to stage for early VQA and bugs ask @theofficialnar

[jomarmontuya]

[jomarmontuya]

Screen.Recording.2024-02-22.at.3.40.12.PM.mov

@zcolah This is the initial draft preview of this component. I think it would be better if we can ask @theofficialnar to deploy it for you to see it yourself.

I've got deploy access to dev this morning, but was asked to let @theofficialnar do the deployments to avoid conflcits

[zcolah]

A few functionalities are not present as discussed on our huddle:

• 1. The Date Selection Pop Up should appear and update when typing
• 2. If the field is clear with no date prior to this, then open the date picker with the current date (aka today’s date) selected
• 3. The experience of typing in a date is not fluid as per the expectations set. Please see requests and Google Calendar as a behavior reference.
• 4. Check the padding of the icon button

[jomarmontuya]

@agalin920 @theofficialnar

Hello both, Seeking your help, on how we can possibly achieve this experience, in our calendar, I have been researching on how to make it possible using core mui-x and can't seem to find a way to copy the same experience.

I would assume we have to write custom logic and override mui-x datepicker functionality to make it work, but I wanted to hear your thoughts, maybe you've encounter the same issues in the past.

I was able to make it work but only partials not as fluid as the video below, and the core mui-x only supports custom inputs but only specifics to defined format.

Screen.Recording.2024-02-29.at.6.43.05.PM.mov

[agalin920]

@jomarmontuya I would focus on exact requirements and not this kind of large general ask. What exact requirement are you unable to solve for? What is the effort to solve this requirement? Communicate with Product (@zcolah) to identify if the cost-benefit of the missing requirements

[jomarmontuya]

@agalin920 Thanks, I will complete first the other requirements and get back to you on this one.

[jomarmontuya]

@agalin920

 1. The Date Selection Pop Up should appear and update when typing

I was able to make the popup appear and set back the focus back to textfield when the TextField is click, however this component needs to have state if we need realtime updates to the calendar picker. Because currently the picker date only updates after I complete typing the date in MMM DD, YYYY format.

2. If the field is clear with no date prior to this, then open the date picker with the current date (aka today’s date) selected

@zcolah can you confirm this, as this is already implemented during our previous review. or I'm missing something?

Screen.Recording.2024-03-04.at.11.49.35.PM.mov

3. The experience of typing in a date is not fluid as per the expectations set. Please see requests and Google Calendar as a behavior reference.

This relates to the issue number one, also it looks like based on the requirements, we need to be able to accept different format inputs in the textfield. This is not possible at the moment with mui-x datePicker as we have to pick one format that we can use.

 4. Check the padding of the icon button

This will get solved on the inputAdornment theme change is merged.

[agalin920]

@jomarmontuya is there an ask of me here? Can this PR ready to be reviewed and moved out of draft?

[agalin920]

Is this emitting a UTC date or localized date?

[jomarmontuya]

Here's the sample date value, it's actually localized on my location since i'm on GMT+8 is this what you're pertaining?

[agalin920]

Question still stands

[jomarmontuya]

@agalin920 It is emitting localize date

[jomarmontuya]

@shrunyan - >zesty-io/material#93

Please see related PR to move this for VQA

[jomarmontuya]

@zcolah This is up on dev you may proceed with VQA

[zcolah]

@jomarmontuya

See Loom video that describes all of the issues below in more detail: https://www.loom.com/share/83204fcc82724beda555a7e49429f2e5

1. Reduce the lag in showing the current date when the user opens the modal for the first time
2. If possible please add a cursor indicator so that the user knows they are typing and knows where they are typing
3. Add ability to update the entire date when it is highlighted/selected
4. Once a user has selected a date via the Calendar pop up, the date input can go back to it's default non selected state. It does not need to be in active state and the year does not need to be highlighted.
5. If there is an invalid date, then please immediately display an error message to a user. See Figma design.

[jomarmontuya]

@zcolah with this feedback I've got I think I had to do a completely different approach here instead for the textfield.

Instead of using the mui datepicker field out of the box I might have to use a custom textfield to allow user a full typing experience, because as of now I don't think there's a way to add cursor to the textfield, as it would only allow you to edit the date base on the format we assign which is "MMM DD, YYYY" that's why you can only change it as a whole not individual characters

@agalin920 I was thinking the solution we talked about last time, using a custom textfield with regex to make it work.

[jomarmontuya]

https://www.loom.com/share/138bafd09fc84528831118b562a96e73?sid=3433482c-0755-4ceb-9ba7-c61bde0ca290

@zcolah here's the update regarding the datefield revamp

cc @agalin920

[zcolah]

Looks good, will test