feat: add date-time-picker

[YushiroDodo63]

Closes #1340

📝 Description

Add a brief description

• How about creating a `<input type="datetime-local">` ? #1340

A new DateTimePicker component, equivalent to <input type="datetime-local"> , has been implemented to allow users to select both date and time in one unified interface.

This component acts as an enhancement to our existing DatePicker, providing support for datetime-local input types.

🚀 New behavior

Please describe the behavior or changes this PR adds

• Can enter date and time in one input field
  • Input format : 2020-11-22 12:22
  • Output format : 2020-11-22T12:22:00
• Update value when focus is removed from input or Enter is pressed
• Update focusedValue each time the value of input is changed

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

Before publishing this PR, the following tasks need to be completed:

• Enable time input by clicking on the calendar button.
• Fix an issue where the time is not saved and cannot be changed after selecting a date by clicking on the calendar button.

I have developed and implemented the input/output formats and functions for handling time based on my understanding.
However, I welcome feedback on the naming conventions, processing content, and formats used.
If there are any suggestions for improvements or corrections, please do not hesitate to review and comment.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 400cf46

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
zag-nextjs	✅ Ready (Inspect)	Visit Preview	Mar 19, 2024 6:56am
zag-solid	✅ Ready (Inspect)	Visit Preview	Mar 19, 2024 6:56am
zag-vue	✅ Ready (Inspect)	Visit Preview	Mar 19, 2024 6:56am
zag-website	❌ Failed (Inspect)		Mar 19, 2024 6:56am

[segunadebayo]

Good progress @YushiroDodo63

Ideally, I would recommend we add this feature to the existing date picker machine instead of creating a new one, so we don’t duplicate code.

[YushiroDodo63]

@segunadebayo
Thank you for your feedback.

Initially, I was considering integrating this functionality into the existing DatePicker component.
However, considering that HTML differentiates input types (date vs. datetime-local), I thought it might be more appropriate to maintain this distinction in functionality and purpose.
For example, Checkbox and Number-input utilize different input types, but are treated as separate components because of their different roles and user interactions.

If integrating this functionality is a priority, what are the specific reasons and benefits of this integrated approach?
Also, I would appreciate details on how you envision this integration, such as whether I should introduce new properties (e.g., withTime ) to the DatePicker, or perhaps add a selectMode option that includes "time" It is.

I am a big fan of this project and fully support its goals. I look forward to your advice on how to proceed.

[segunadebayo]

I appreciate your comment and glad you're excited about Zag.

Here's how I would approach it @YushiroDodo63

Rendering the time

Start by rendering the time component of the specified DateValue. In the connect.ts file, add a getTimeSegment

hour12 is useful if the user wants a 12-hour or 24-hour format.

<div className="time">
   <span>{api.getTimeSegment({ segment: 'hour', hour12: 'true|false' })}</span>
   <span>{api.getTimeSegment({ segment: 'minutes', })}</span>
   <span>{api.getTimeSegment({ segment: 'period' })}</span>
</div>

Editing the time

To edit the time segment of the date, we need to render a list of hours/minutes/period within the picker. To solve this, you'll need to provide:

• getHours({ hour12: 'true|false' }): This returns an array like [{ label: '12', value: '12' }]
• getMinutes()
• getPeriods()

Finally, you need to provide prop getters for the time segments. In this prop getters, you'll attach an onClick event to update the time segment of the date value.

• getHourCellProps
• getMinuteCellProps
• getPeriodCellProps

I hope this is helpful to you.

[segunadebayo]

Thanks for attempting this @YushiroDodo63.

Closing for now. Kindly re-open when you have time.