How to Clear All Input Fields Including dmc.DatePicker and dmc.NumberInput in Dash?

Hello,

I am developing a Dash application where I need to clear several types of input fields (NumberInput, TextInput, and DatePicker) with a single button click. However, only the TextInput is being cleared, while the NumberInput and DatePicker remain unchanged. Could you please advise on how to ensure the button resets all input fields correctly?

Here’s the code snippet I’m working with:

layout = html.Div([
    dmc.NumberInput(
        id='number-input',
        label='Number Input',
    ),
    dmc.TextInput(
        id='text-input',
        label='Text Input',
    ),
    dmc.DatePicker(
        id='date-input',
        label='Date Input',
    ),
    html.Button('Clear Input', id='clear-button', n_clicks=0),
    html.Div(id='output')
])

@callback(
    Output('number-input', 'value'),
    Output('text-input', 'value'),
    Output('date-input', 'value'),
    Input('clear-button', 'n_clicks')
)
def clear_input(n_clicks):
    if n_clicks > 0:
        return "", "", ""
    return dash.no_update, dash.no_update, dash.no_update

Hi @mito.kc

The default value of dmc.DatePicker() is None, so you should return None instead of an empty string.

For the NumberInput(), it seems that there’s a bug with the implementation because the default value is indeed an empty string but for some reason it doesn’t seem to work here. Maybe @snehilvj could help you more with this.

1 Like

Hi @mo.elauzei

Thank you for your advice on dmc.DatePicker() ! I tried your suggestion to return None, and it worked as expected.

1 Like