Custom DateTimePicker component

gtauzin commented 1 day ago

Question

Hello,

I am trying to create a custom DateTimePicker component. Although dmc has one, it is available in v0.15 of dmc which is not available (yet?) in vizro. Can I first ask if anyone is aware of an open source version of such a vizro component? Seems like it should be pretty commonly used but could not find anything.

My idea was to take a DatePicker and a TimeInput both from dmc and put them next to each other in a group. However, I am running into the following issue:

One of the parameter of the component would be value, which is a datetime.datetime. At build time, I pass value.date() to DatePicker and value.time() to TimeInput. However, when it is modified, I would like to recompute value from the date_picker.value and the time_input.value. Is it possible?

Thank you for your help!

Code/Examples

This is what I came up with so far on PyCafe.

Which package?

vizro

Code of Conduct

[X] I agree to follow the Code of Conduct.

maxschulz-COL commented 1 day ago

Hey @gtauzin 👋 ,

nice to meet you? At the risk of not having understood your question, but isn't this the solution: https://vizro.readthedocs.io/en/stable/pages/API-reference/models/#vizro.models.DatePicker

Let me know if you were looking for something else 💪 !

Best,

Max

gtauzin commented 1 day ago

Hi @maxschulz-COL and nice to meet you too!

vizro's DatePicker only allows to pick date and not time. I need to pick both of them.

dash-maintine-components has a DateTimePicker but only in its most recent version (>= 0.15.0) which is incompatible with vizro (requires <0.13.0 see here). That lead me to create my own by putting together two existing components of dash-mantine-components, DatePicker (on which vizro's DatePicker relies) and TimeInput.

maxschulz-COL commented 1 day ago

Hi @maxschulz-COL and nice to meet you too!

vizro's DatePicker only allows to pick date and not time. I need to pick both of them.

dash-maintine-components has a DateTimePicker but only in its most recent version (>= 0.15.0) which is incompatible with vizro (requires <0.13.0 see here). That lead me to create my own by putting together two existing components of dash-mantine-components, DatePicker (on which vizro's DatePicker relies) and TimeInput.

Ah I see, in that case I think @antonymilne has a potential solution for you :)

gtauzin commented 1 day ago

Thanks @maxschulz-COL, that would be great!

antonymilne commented 20 hours ago

Hello @gtauzin and thanks for raising the issue. This is all very interesting. And thanks for the pycafe example that really helps understand what's going on.

For a start, the dmc date picker components have caused us various problems and workarounds (as you can see by the comments), and about 6 months ago when we fixed stuff well enough we pinned to dmc<0.13.0 because we knew that future breaking changes were likely in dmc. I didn't know that 0.15 had now come out, which is good to know. I see that 0.12 still seems quite popular (more so than 0.14 in fact): https://pepy.tech/projects/dash-mantine-components?versions=0.14.*&versions=0.13.*&versions=0.12.

In general, much as I love dmc, we are reducing our dependence on it (in favour of dbc) and I suspect the datepicker will be the only dmc component we have left soon.

All this to say: we should try and bump our dmc dependency, but it's not a high priority I'm afraid. Possibly it would help with some of the date picker issues though @petar-qb? Which would offer some more incentives to make the change. I've made a ticket to try and see how easy it is to bump anyway: #905.

When we do bump our dependency it remains to be seen if and how we would be able to build DatePickerTime into Vizro. It's not something we've thought about before and you're the first person who's asked for any kind of time (rather than just date) selector but let me add it to https://github.com/mckinsey/vizro/issues/318. It's a very reasonable request but just not something anyone has asked before.

So I think for now the best approach is indeed to try and make your own custom component with DatePicker and TimeInput, just like you've done here.

Now onto your question: if I understand correctly, you'd like the default value shown by the date and time picker to correspond to today's date and the current time, is that right? I think something like this should be possible, although I suspect it might be a bit buggy or you might need to sacrifice something like persistence of value when you change pages. Are you using dynamic data?

gtauzin commented 19 hours ago

Hi @antonymilne. Thank you, I really appreciate the time you took to give me a better picture of the situation.

I do not mind building a custom DateTimePicker as it is also a good way to improve my understanding of vizro. I do use dynamic data (through the kedro data catalog) but I am not sure how it is relevant to this custom component.

In any case, let me try and explain more clearly the issue I am facing. When I create a DateTimePicker, I can pass a value which is datetime object and through the build function I can assign the DatePicker's value to be the date (i.e. I pass date_value=value.date() and the TimeInput's value to be the time (i.e. time_valuevalue.time()). This is fine and works well.

Now, I wish to use the value of my DateTimePicker in different actions. My problem is that when the user modify the date and the time, they modify it separately in two different subcomponent, I would like to pass the value that is built back from the date_value and time_value into a datetime object.

Thank you and please let me know if this is not clear!

mckinsey / vizro