Time visual element

[FlorianJacta]

Description

This would address a time-only picker.

This issue aims to integrate a time picker for date visual element. When with_time is True, a great way to visualize the time would be a visual time picker.

Example:

Reference:

https://github.com/Avaiga/taipy/discussions/162

This feature was present for taipy-gui < 2.2.

Acceptance Criteria

• [ ] Ensure new code is unit tested, and check code coverage is at least 90%
• [ ] Propagate any change on the demos and run all of them to ensure there is no breaking change
• [ ] Ensure any change is well documented

[Tryxns]

May I be the assignee for this issue @jrobinAV ?

[jrobinAV]

@Tryxns Thank you for your help.

[Tryxns]

Hi @jrobinAV, I think this issue already solved by your team.. I just saw @FredLL-Avaiga committed: https://github.com/Avaiga/taipy/commit/716b5ccc1065a614a9f40f33bac4baffaf506154#diff-f98e6ecb09784f49ee6eb7519ebc2b4f461b410596ea024db97752350eb4b3c8 I've tried it & it's already works :smile:

The given example picture is its mobile variant (ref https://mui.com/x/react-date-pickers/date-time-picker/) and the existing picker is using responsive variant, which u can get the same UI (same as mobile variant) by picking time via mobile browser / reducing your desktop browser width to be same as mobile screen width..

Correct Me If I'm Wrong~

[quest-bot[bot]]

New Quest!

A new Quest has been launched in @Avaiga’s repo. Merge a PR that solves this issue to loot the Quest and earn your reward.

---

Some loot has been stashed in this issue to reward the solver!

🗡 Comment @quest-bot embark to check-in for this Quest and start solving the issue. Other solvers will be notified!

⚔️ When you submit a PR, comment @quest-bot loot #459 to link your PR to this Quest.

Questions? Check out the docs.

[FlorianJacta]

This feature is about having a time-only picker without the date part, which differs from what exists in Taipy.

[Tryxns]

Noted @FlorianJacta. Thanks for the clarification

[Tryxns]

@quest-bot embark

[quest-bot[bot]]

@Tryxns has embarked on their Quest. 🗡

• @Tryxns has been on GitHub since 2015.
• They have merged 4 public PRs in that time.
• Their swords are blessed with CSS and JavaScript magic ✨
• They haven't contributed to this repo before.

Questions? Check out the docs.

[Tryxns]

Hi @FredLL-Avaiga / @trgiangdo / @namnguyen20999 I need your help.

Currently I encountering an error when running this snippet (in different dir after installing taipy which in my cloned local):

import datetime

from taipy.gui import Gui
date = datetime.datetime(1789, 7, 14, 17, 5, 12)

page = "<|{time}|time|>"

if __name__ == "__main__":
    Gui(page).run(title="Time - Simple")

The browser shows: Component TimeSelector is not registered

The console shows:

WARNING:root:
--- 2 warning(s) were found for page '/' in variable 'page' ---
 - Warning 1: Variable 'time' is not available in either the '__main__' or '__main__' modules.
 - Warning 2: Variable 'time' is not defined (in expression '{time}'):
'types.SimpleNamespace' object has no attribute 'time'

What I have done:

• I have regis my time selector component in index.ts
• I installed taipy using my cloned repo

Here's my code: https://github.com/Avaiga/taipy/pull/1991/files

What should I do?

[Tryxns]

Update: I have fixed the console error. It was because wrong variable name. It's supposed to be like this now:

import datetime

from taipy.gui import Gui
time = datetime.datetime(1789, 7, 14, 17, 5, 12)

page = "<|{time}|time|>"

if __name__ == "__main__":
    Gui(page).run(title="Time - Simple")

But somehow the error on browser still persist, I'm clueless

[FredLL-Avaiga]

Didi you declare the time component in factory.py ? If you create a PR will be able to help by reading your code, it's much easier for everybody

[Tryxns]

@FredLL-Avaiga , yes I already declared it, you can find my PR here: https://github.com/Avaiga/taipy/pull/1991

[FredLL-Avaiga]

from the description "to integrate a time picker for date visual element" I think date is important here. ie enhance the date element to be able to use the Mui mobile date picker instead of the desktop one ... But I think we could also have a time component ...

[Tryxns]

Hi @jrobinAV, I think this issue already solved by your team.. I just saw @FredLL-Avaiga committed: 716b5cc#diff-f98e6ecb09784f49ee6eb7519ebc2b4f461b410596ea024db97752350eb4b3c8 I've tried it & it's already works 😄

The given example picture is its mobile variant (ref https://mui.com/x/react-date-pickers/date-time-picker/) and the existing picker is using responsive variant, which u can get the same UI (same as mobile variant) by picking time via mobile browser / reducing your desktop browser width to be same as mobile screen width..

Correct Me If I'm Wrong~

That was what I thought at the 1st place as you already made the date component & daterange component

[FredLL-Avaiga]

I wouldn't mind seeing a property to force the time selector in mobile mode And I wouldn't mind either having a time only component...

[Tryxns]

This feature is about having a time-only picker without the date part, which differs from what exists in Taipy.

@FredLL-Avaiga but Florian said this for time-only picker. I believe you are the right person to help me in this issue :smile:

[Tryxns]

Update: I have fixed the console error. It was because wrong variable name. It's supposed to be like this now:

import datetime

from taipy.gui import Gui
time = datetime.datetime(1789, 7, 14, 17, 5, 12)

page = "<|{time}|time|>"

if __name__ == "__main__":
    Gui(page).run(title="Time - Simple")

But somehow the error on browser still persist, I'm clueless

Fixed~

[quest-bot[bot]]

🧚 @Tryxns has submitted PR https://github.com/Avaiga/taipy/issues/1991 and is claiming the loot.

Keep up the pace, or you'll be left in the shadows.

Questions? Check out the docs.

[Tryxns]

It's a wrap!! Finaaally :joy: Thanks guys!! :tada: :raised_hands: