Skip to content

Add date time component usage guides#165

Open
kathrinschalber wants to merge 21 commits intomainfrom
docs/date-time-components-guides
Open

Add date time component usage guides#165
kathrinschalber wants to merge 21 commits intomainfrom
docs/date-time-components-guides

Conversation

@kathrinschalber
Copy link
Collaborator

@kathrinschalber kathrinschalber commented Jan 13, 2026

💡 What is the current behavior?

Missing a few usage guides

GitHub Issue Number: #

🆕 What is the new behavior?

  • Added usage guide for date picker, date time picker and date time input
  • Added illustrations to Figma and as PNG files
  • Added entries to sidebar

Note: As the date time input doesn't exsit at this time, this is a first draft. In case it isn't finished once this PR is ready to be merged, I would hide it from the sidebar in the meanwhile.

👨‍💻 Help & support

Introduces documentation for the date-time picker component, updates the input-date-time guide with expanded options and usage details, and refines the date-picker guide for consistency. Adds new Figma illustration assets for the updated documentation.
@netlify
Copy link

netlify bot commented Jan 13, 2026

Deploy Preview for industrial-experience ready!

Name Link
🔨 Latest commit 25a88ec
🔍 Latest deploy log https://app.netlify.com/projects/industrial-experience/deploys/6988c71ae9a3ab0008bfd8f5
😎 Deploy Preview https://deploy-preview-165--industrial-experience.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Revised the 'Related' sections in date-picker, date-time-picker, input-date-time, and input-time documentation to add a link to writing guidelines for date and time, and to remove or reorder other related links for improved clarity and consistency.
Improved documentation for date picker, date-time picker, input-date-time, input-date, input-time, and time picker components with clearer option descriptions and behavior explanations. Added links to the W3C date picker accessibility reference for all related guides. Updated Figma illustration for date-time picker states.
Updated references to date picker and time picker states to point to the correct guide sections, ensuring documentation links work as intended.
@kathrinschalber
Copy link
Collaborator Author

/gemini review

@kathrinschalber kathrinschalber requested review from flxlst09 and removed request for flxlst09 January 15, 2026 09:34
@kathrinschalber
Copy link
Collaborator Author

@flxlst09 added you as a reviewer for the "actual" review.

Copy link
Collaborator

@flxlst09 flxlst09 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very good, only smaller suggestions. As discussed: Date time input usage guide will be hidden until the component is ready.

Updated internal documentation links in date picker, date-time picker, input-date, and input-date-time guides to point to more specific sections and correct files. This improves navigation and clarity for users referencing related options and components.
Improved explanations and formatting in guides for date-time-picker, input-date-time, input-date, and input-time components. Clarified range selection behavior, input formats, and updated references to related documentation for better usability and consistency.
@kathrinschalber kathrinschalber marked this pull request as ready for review January 19, 2026 12:42
Copy link
Collaborator

@tokyojen tokyojen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two tiny things

kathrinschalber and others added 5 commits January 21, 2026 14:27
Improved clarity and consistency in guides for date-time picker, input-date-time, input-date, and input-time components. Adjusted format descriptions, added details for week start and week numbers, and refined terminology for selected dates and current day.
Copy link
Collaborator Author

@kathrinschalber kathrinschalber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexkaduk I cannot request changes since I'm the PR author, however I found a few things to look at. Let me know if there are any doubts 😊


## Basic

<DatetimeInputPlayground height="28rem" />
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexkaduk please add a default value, similar to the date input.

Feedback on the component itself:

  • I've noticed this "double border", it seems like there's 2 dropdowns stacked on top of each other:
Image
  • The confirm button isn't vertically centered
  • In readonly mode, when I access the input through keyboard (=tab), I can still open the picker and edit the date. However, I noticed that this also happens on the date input

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 default value is added
2 "double border" case is fixed. it required to wrap datetime-picker content (it is grid) with ix-date-time-card (case used by date and time picker)
3 same reason as "double border"
4 that is how it works as the moment. let me suggest to have new ticket for it and adjust date/time input components

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexkaduk Can we change the default value from 1/1/1970 to the current day?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done. thanks for the feedback

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants