Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content: Date Field Revamp #2414

Closed
zcolah opened this issue Dec 27, 2023 · 0 comments · Fixed by #2562
Closed

Content: Date Field Revamp #2414

zcolah opened this issue Dec 27, 2023 · 0 comments · Fixed by #2562
Assignees
Labels
enhancement Improvement to an existing feature hand-off-ready roadmap

Comments

@zcolah
Copy link

zcolah commented Dec 27, 2023

Problem

Users have reported the following problems with the date field in the Content App:

  1. Users cannot easily identify how to open the date picker as the calendar icon to open it all the way to the right.
  2. "If I try to type, it does not let me type. I would love if as a user I can type a date without making an error."
  3. "The date format is confusing. I do not know the date or month in this format." This is because we present it the way we store it - 2022 - 03 -05.

Solution

We are revamping the user experience of the date field in the Content application to make it more user friendly.

Here is a list of the updates we are making:

  1. Date Picker has been given an intuitive interface similar to Google Calendar, one of the most used date time user interfaces on the web
  2. Users can now manually type in a date
  3. The date picker now opens when clicking on the input
  4. Date can be seen in a more user friendly format (Feb 5, 2023). Note: Users still can view the date in the exact format it is stored in (2022 - 03 -05).
  5. Date Picker Button has been shifted to the left from the right for easier recognition while scanning all fields
  6. Dedicated button to clear the date field

image

image

Notes for Developer

  1. @agalin920 has started a prototype of the date picker in this Code Sandbox that has the critical functionality of the date picker that is expected. Of course it is not perfect and does not have everything thing in it. This is just a starting point. Please review this when building the date picker.
    https://codesandbox.io/s/trusting-margulis-mcgjdn?file=/src/Demo.tsx

  2. Do read the dev notes in yellow in the Figma file

  3. This project can be confusing so do reach out to me if you have any questions.

Date Inputs to Accept and How to Interpret them

  1. Sep 22, 2023 (should also support case of no commas)
  2. Sep 22nd, 2023 (should also support case of no commas)
  3. September, 22 2023 (should also support case of no commas)
  4. September 22nd, 2023 (should also support case of no commas)
  5. 9/22/2023 (should also support case where spaces are used instead of slashes)
  6. 22/9/2023 (should also support case where spaces are used instead of slashes)
  7. 2023, Feb 2 (should also support case of no commas)
  8. 2023, February 2 (should also support case of no commas)

Figma

https://www.figma.com/file/zOI7oSH3fG1XDmmPzsP6PX/Zesty-3.0-Revamp?type=design&node-id=2373%3A247538&mode=dev&t=2czQWJDo7fywuUAc-1

@zcolah zcolah added enhancement Improvement to an existing feature roadmap hand-off-ready labels Dec 27, 2023
@jomarmontuya jomarmontuya self-assigned this Feb 12, 2024
@jomarmontuya jomarmontuya mentioned this issue Feb 22, 2024
3 tasks
shrunyan added a commit that referenced this issue Apr 4, 2024
closes #2414


- [x] Check with andres if timestamp is needed
- [x] Better approach on getting the zesty-orange background
- [x] Deployment to stage for early VQA and bugs ask @theofficialnar
@zcolah zcolah moved this to Recently Completed in Zesty.io Product Roadmap Jun 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Improvement to an existing feature hand-off-ready roadmap
Projects
Status: Recently Completed
Development

Successfully merging a pull request may close this issue.

2 participants