docs: date input ux description #1525
Conversation
|
| @@ -0,0 +1,69 @@ | |||
| The Date input component allows users to enter and select a date in a standardized format. | |||
There was a problem hiding this comment.
The Date input component enables users to enter and select a date in a standardized format. We typically use this component in forms, calendars, and scheduling tools to ensure consistent and accurate date entries.
|
| @@ -0,0 +1,69 @@ | |||
| The date input component enables users to enter and select a date in a standardized format. We typically use this component in forms, calendars, and scheduling tools to ensure consistent and accurate date entries. | |||
There was a problem hiding this comment.
| The date input component enables users to enter and select a date in a standardized format. We typically use this component in forms, calendars, and scheduling tools to ensure consistent and accurate date entries. | |
| The date input component enables users to enter and select a date in a standardized format. We typically use this component in forms, filters and scheduling tools to ensure consistent and accurate date entries. |
A date input consists of a calendar, wouldn't say that we use it in calendars
| ## Options | ||
|
|
||
| - **Label**: See [form field](./forms/forms-field.md) | ||
| - **Value**: See [form field](./forms/forms-field.md) |
There was a problem hiding this comment.
| - **Value**: See [form field](./forms/forms-field.md) | |
| - **Placeholder**: See [form field](./forms/forms-field.md) |
|
|
||
| - **Label**: See [form field](./forms/forms-field.md) | ||
| - **Value**: See [form field](./forms/forms-field.md) | ||
| - **Required**: See [form field](./forms/forms-field.md) |
There was a problem hiding this comment.
we haven't had this on the other markdowns. should we add it everywhere?
There was a problem hiding this comment.
- same for a couple other listed fields here
| - **Show text as tooltip**: See [form field](./forms/forms-field.md) | ||
| - **Placeholder**: See [form field](./forms/forms-field.md). We typically use a placeholder to show an example date format to assist users when the field is empty. | ||
| - **Error message**: Feedback text when date is not parsable. We typically use this to inform users that the entered date format is incorrect and guide them to enter a valid date. | ||
| - **Format**: Specify the date format, default ‘yyyy/LL/dd’. We typically use this to ensure that dates are entered in a consistent and recognizable format, leveraging the Luxon JavaScript library for parsing and formatting. |
There was a problem hiding this comment.
| - **Format**: Specify the date format, default ‘yyyy/LL/dd’. We typically use this to ensure that dates are entered in a consistent and recognizable format, leveraging the Luxon JavaScript library for parsing and formatting. | |
| - **Format**: Specify the date format, default `yyyy/LL/dd` to ensure that dates are entered in a consistent and recognizable format. |
What do you think about using code format?
I removed the technical details and I found that consistency+recognition is not a "typical" thing we do - but I would love to see the Xcelerator guideline here as a "we typically use...", what do you think?
|  | ||
|
|
||
|
|
||
| ## Dos and Don’ts |
There was a problem hiding this comment.
the dos and donts are too long, please shorten them (you shouldn't be needing a colon, even though I like the structure it gives your list)
|
|
||
| - Do use consistent date formats: Ensure the date format is uniform throughout the application to avoid confusion | ||
| - Do use separate inputs for date ranges: Provide distinct input fields for the start and end dates to make it easier for users to enter and understand date ranges | ||
| - Do provide clear instructions: Clearly indicate the required date format to users. For example, “Please enter the date in yyyy-MM-dd format” |
There was a problem hiding this comment.
| - Do provide clear instructions: Clearly indicate the required date format to users. For example, “Please enter the date in yyyy-MM-dd format” | |
| - Do provide clear instructions: Clearly indicate the required date format to users. For example, “Enter the date in yyyy-MM-dd format” |
In the writing guideline, we recommend to not use please since it lengthens the sentence 😉
| - Do provide clear instructions: Clearly indicate the required date format to users. For example, “Please enter the date in yyyy-MM-dd format” | ||
| - Do handle time zones: If time zones are relevant, ensure that the date input accounts for them and is clearly labeled | ||
| - Do consider localization: Adapt date formats to the local conventions of your users if your application is used internationally | ||
| - Don't use ambiguous formats: Do not use date formats that can be easily misinterpreted, such as 09/08/2006 without clear context |
There was a problem hiding this comment.
Sooo I'm wondering why do you use exactly that format (just with the year at the beginning) in your examples? Does it mean that the context is clear there? 😜
🆕 What is the new behavior?
🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm run docs)pnpm test)pnpm lint)pnpm build, changes pushed)👨💻 Help & support