snehilvj / dash-mantine-components

Plotly Dash components based on Mantine React Components
https://www.dash-mantine-components.com
MIT License
563 stars 56 forks source link

DateInput Date Time mode does not register the time #308

Closed LaiaBigFish closed 1 month ago

LaiaBigFish commented 2 months ago

The component returns only the date. Can replicate issue on website/using website example

from datetime import datetime

import dash_mantine_components as dmc
from dash import Output, callback, Input, html

html.Div(
    [
        dmc.DateInput(
            id="datetime-time",
            valueFormat="DD/MM/YYYY HH:mm:ss",
            label="Date and Time input",
            value=datetime.now(),
            w=250,
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-datetime"),
    ]
)

@callback(Output("selected-datetime", "children"), Input("datetime-time", "value"))
def update_output(d):
    prefix = "You entered: "
    if d:
        return prefix + d
    else:
        return ""
AnnMarieW commented 2 months ago

Thanks for reporting @LaiaBigFish

It looks like this feature is not available yet in dmc, and I'll remove it from the docs until it's ready to go. In the meantime, would the dmc.DateTimePicker work for you? It's available, just not documented yet

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


import dash_mantine_components as dmc
from dash import Dash, _dash_renderer
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)

app.layout = dmc.MantineProvider(
    dmc.DateTimePicker(
        label="Pick date and time",
        placeholder="Pick date and time",
    )
)

if __name__ == "__main__":
    app.run(debug=True)
LaiaBigFish commented 2 months ago

Yes, that is perfect, thank you! I did not know it was available :)