How to implement a datetime picker using Nicegui

[MuuXB]

I want to implement a datetime component using Nicegui. Are there any examples? The examples I can see are all clock-style time pickers. I want something like the one below. Any good methods?

[evnchn]

Hello @MuuXB

On this I have 3 things I want to mention, hopefully guiding you in the right direction.

Dead End: native element tuning

Since our ui.time is based on https://quasar.dev/vue-components/time, which is always clock-style, ui.time will likely never serve your needs. Feature requests for Quasar please head to https://github.com/quasarframework/quasar but they are even more stretched than us, so I would not expect rapid response.

Temporary Solution: ui.selects

You may use https://nicegui.io/documentation/select which is based on https://quasar.dev/vue-components/select for list-based datetime picker. You will have to bring your own logic if you want to restrict time selection to a range, though.

Long-Term (?) Solution: Integrating other Vue component frameworks

It is not the first time that we bump into Quasar constraints, and integrating other Vue component frameworks has been on the roadmap for NiceGUI. We had a batteries-not-included feature in https://nicegui.io/documentation/section_styling_appearance#using_other_vue_ui_frameworks where you can use, for example, ElementPlus with NiceGUI. But not via ui.time because that is tied with Quasar. Rather, you may use ui.element('el-...'), or take inspiration from the implementation of ui.time at https://github.com/zauberzeug/nicegui/blob/main/nicegui/elements/time.py to make your own ElementPlus time picker.

While this would be long term and take many manhours, it may not if you have Agentic AI handy.