DMC Date Time Picker Dropping Miliseconds when set by A button

[sssaha]

I have a DMC Datetimepicker which in the example is initialized with the current datetime. When done - it retains the milisecond. I also have a button that can then set the time. But doing this way - it seems like the value does not retain the milisecond anymore..

MRE:

import dash_mantine_components as dmc
import os,datetime
import plotly.express as px


import dash
from dash import  html, dcc,Output,Input,State,callback
import dash_bootstrap_components as dbc

dash._dash_renderer._set_react_version('18.2.0')
app = dash.Dash(
    __name__,
    use_pages=False,
    suppress_callback_exceptions=True,
    external_stylesheets=[dbc.themes.BOOTSTRAP] + dmc.styles.ALL,
)

df = px.data.tips()
title = "Enable caching - with dropdown and figure"
dropdown = dcc.Dropdown(
    ["Fri", "Sat", "Sun"],
    "Fri",
    clearable=False,
    persistence=True,
    id="dropdown2",
)
graph = dcc.Graph()


app.layout = dmc.MantineProvider(dbc.Container(
    [
        html.Div([html.H4(title),
                  dropdown,
                  dcc.Loading(graph),
                  dmc.Button('Set Time', id='set_time_button', color='blue'),
                  dmc.DateTimePicker(popoverProps={'zIndex': 30000}, value=datetime.datetime.now(), withSeconds=True, label='Date Time Picker', valueFormat="YYYY-MM-DD HH:mm:ss.SSS",
                                     id='dmc_datetime')])
    ]
))



@callback(Output('dmc_datetime', 'value'), Input('set_time_button', 'n_clicks'),prevent_initial_call=True)
def set_time(n):
    return datetime.datetime.now()

if __name__ == "__main__":
    app.run_server(debug=True)

During First Load

After pressing button

[AnnMarieW]

hi @sssaha
It doesn't look like the datetime picker in Mantine supports milliseconds

https://mantine.dev/dates/date-time-picker/

[AnnMarieW]

@sssaha
Actually, it looks like it could be supported.

The date is converted to datestring here and it excludes the milliseconds

https://github.com/snehilvj/dash-mantine-components/blob/master/src/ts/utils/dates.ts#L15

// convert to datetime string for dash
export const datetimeToString = (d: DateValue) => {
    return d ? dayjs(d).format("YYYY-MM-DD HH:mm:ss") : null;
};

In the DateTimePicker, when the value changes, it calls the function above
https://github.com/snehilvj/dash-mantine-components/blob/master/src/ts/components/dates/DateTimePicker.tsx#L69

    useDidUpdate(() => {
        setDate(stringToDate(value));
    }, [value]);

We could probably add a new prop withMilliseconds and to convert to a datestring with milliseconds. Adding this new prop would make it so it's not a breaking change.

[sssaha]

Also on that note - will it be possible to keep the timeformat of the internal timeinput popover to be the same as the defined value format? It is really confusing for the user to have different time format

[AnnMarieW]

Also on that note - will it be possible to keep the timeformat of the internal timeinput popover to be the same as the defined value format? It is really confusing for the user to have different time format

Can you elaborate on this? Not exactly sure what you mean. However, if you are referring to the time input component, it’s just an html.Input and currently the format is dependent on the browser. Any additional features like formatting this input would have to be added to the upstream Mantine component. Maybe you could do a feature request there?

mantinedev/mantine#4294

[sssaha]

I went through the comment in mantine and it seems like this is part of HTML5 and can not be changed.
BTW I tested your suggestion for miliseconds and it worked. However - it seems like withseconds = False do not have any impact as I think it only impacts the underlying Time component - not the final value

[AnnMarieW]

BTW I tested your suggestion for miliseconds and it worked. However - it seems like withseconds = False do not have any impact as I think it only impacts the underlying Time component - not the final value

Can you say more about this? It could be helpful to provide some code for what you tried and what worked (or didn't). Thanks for looking into this :-)

[sssaha]

@AnnMarieW - please allow me some time - let me finish what I am currently stuck at my job and I will post examples and screenshots

[AnnMarieW]

@sssaha I think this issue does need more discussion. After giving it some consideration, it may not be good to give the impression that the component can handle milliseconds when the time picker component can only handle seconds.

Still open to exploring alternate solutions, but no rush.

[AnnMarieW]

I'm transferring this to Discussions for now.

If we come up with a viable solution, or the upstream Mantine library supports a timepicker with milliseconds, we can open an issue for it.