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.