DateTimePicker

The DateTimePicker component allows users to select both a date and time from a calendar interface. It extends MUI's DateTimePicker component with built-in timezone support.

import dash
from dash import html, Input, Output, State
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = html.Div([
    dmc.DateTimePicker(
        id="datetime-picker",
        label="Select date and time",
    ),
    html.Div(id="selected-datetime")
])

@app.callback(
    Output("selected-datetime", "children"),
    Input("datetime-picker", "value")
)
def display_selected_datetime(selected_datetime):
    if selected_datetime:
        return f"Selected date and time: {selected_datetime}"
    return "No date/time selected"

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

Props Table

Name	Type	Default	Description
`id`	`string`	`undefined`	The ID used to identify this component
`label`	`string`	`"Select date and time"`	Label text displayed above the input
`value`	`string`	`undefined`	The selected date/time as an ISO string
`timezone`	`string`	`"America/New_York"`	The timezone to display and return the date/time in
`sx`	`SxProps`	`undefined`	MUI system props for custom styling

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI DateTimePicker Documentation

Props Table​

Props Table