feat: Add DateTimePicker in Bubbles

[anirudhaCodes]

Introducing DateTimePicker in Bubbles

Description

This pull request introduces the DateTimePicker component to the Bubbles library. The DateTimePicker now allows users to input both date and time. But in later version you can take either of it (only date or only time) as a input by disabling either of it. Additionally, the current implementation supports a 12-hour time frame, with plans to extend support to a 24-hour format in future releases.

Demo:

date.and.time.picker.mp4

To-Do:

• Extend support for 24-hour time frame.
• Enable and disable time or date

[anirudhaCodes]

Added TImeFormat (12-Hour and 24-Hour):

12-Hour:

24-Hour:

[anirudhaCodes]

Enable and disable time or date

DateTime:

DateOnly:

TimeOnly:

[maaslalani]

Nice work on this one @anirudhaCodes! This will be very useful for bubbles, gum, and huh?! I can take a look in a little bit but would you mind adding some basic tests so we can ensure this is working and doesn't break in the future?

[maaslalani]

Btw I love this compact picker but worth also taking inspiration from:

#404 (comment)

Which is also incredibly nice!

[anirudhaCodes]

Nice work on this one @anirudhaCodes! This will be very useful for bubbles, gum, and huh?! I can take a look in a little bit but would you mind adding some basic tests so we can ensure this is working and doesn't break in the future?

Thank you @maaslalani for the feedback. I will definitely add tests (corner cases).
Also there are some remaining tasks like

• Avoid changing the date if we increment the time value. (should we avoid that or should we keep that ?)

For example:
If we increment time from 23:59 to 24:00 then it shifts date by one.

[anirudhaCodes]

Btw I love this compact picker but worth also taking inspiration from:

#404 (comment)

Which is also incredibly nice!

You mean the compact version of the # 404 or calendar version ?

[anirudhaCodes]

@maaslalani
I Added the tests for the datetimepicker.
Let me know what else I need to do to add more value in it.

[meowgorithm]

Also, for context, note that we also have #76.

I think that in an ideal scenario we offer options for both compact and expanded views.

[anirudhaCodes]

Also, for context, note that we also have #76.

I think that in an ideal scenario we offer options for both compact and expanded views.

Sure, I will add both compact and expanded views.
I wonder how expanded version of time will look like.

I will share the design for expanded version date picker by tomorrow or day after tomorrow (I will try to keep the design customizable).

[anirudhaCodes]

@meowgorithm
Demo of the expanded view:

date_expanded.mp4

I'm eagerly looking forward to hearing your thoughts on design of the expanded view

[maaslalani]

@anirudhaCodes Can we use Lip Gloss tables for the expanded calendar view? I don't see a reason to duplicate code here unless I am mistaken. We can use the StyleFunc to highlight the selected row / column based on user interaction.

https://github.com/charmbracelet/lipgloss/releases/tag/v0.9.0