New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clear DatePickerSingle from callback? #434

Open
EBoisseauSierra opened this Issue Jan 11, 2019 · 1 comment

Comments

Projects
None yet
2 participants
@EBoisseauSierra
Copy link

EBoisseauSierra commented Jan 11, 2019

➥ Is it possible to clear the date from a dcc.DatePickerSingle via a callback?


Background
Say I have a date picker, and a button. I want to clear the selected date when I click on the button. (Ok, this looks a lot like a clearable=True DatePickerSingle, but my real case is of course a bit more complex).

Problem
I have tried to return either '' (an empty string) or None in the callback, but neither seems to work: each time, the select date disappear, but I get an "Invalid date" placeholder and the calendar dialog doesn't appear anymore.

screenshot from 2019-01-11 11-24-54

MWE

# import external modules
import dash
import dash_core_components as dcc
import dash_html_components as html
import pytz

# import external functions
from datetime import datetime, timedelta
from dateutil.parser import parse
from dash.dependencies import Input, Output, State

def serve_layout():

    return html.Main(
        [
            dcc.DatePickerSingle(
                id='datepicker',
            # layout settings
                first_day_of_week=1,
                display_format='DD/MM/YY',
                placeholder='Start date',
            # date defaults
                date=datetime.now(),
            # date limits
                min_date_allowed=datetime(2018, 1, 1),
                # today
                max_date_allowed=datetime.now(),
                initial_visible_month=datetime(
                    datetime.now().year,
                    datetime.now().month,
                    1
                ),
            ),
            html.Button(
                'Clear date',
                id='button'
            )
        ],
    )

app = dash.Dash(
    __name__,
)

# re-compute the layout everytime the page is refreshed — cf. https://dash.plot.ly/live-updates
app.layout = serve_layout

@app.callback(
    Output('datepicker', 'date'),
    [
        Input('button', 'n_clicks'),
    ],
    [
        State('datepicker', 'date'),
    ]
)
def clear_date(n_clicks, current_selected_date):
    ''' clears the date when button is clicked'''

    if (n_clicks is not None) and (n_clicks > 0):
        # =============================== neither of both following lines work 
        # return ''
        return None
    else:
        return current_selected_date


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

@Marc-Andre-Rivet

This comment has been minimized.

Copy link
Contributor

Marc-Andre-Rivet commented Jan 11, 2019

@EBoisseauSierra Thanks for reporting this. You are doing the right thing by setting the value to None but the dcc.DatePickerSingle and the dcc.DatePickerRange are not handling the None (or null) case correctly -- causing the Invalid Date.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment