Datepickerrange clearable in tabs not working as expected

Dash Python
1

Hey,
The datepickerrange is not working properly in tabs. When Clearable property is set true, after clearing it just goes hang. I am having multiple tabs and using 0.13.0rc8 dcc package.
It seems like clear button is not rendering the callbacks.
Thanks,

2

Issue that I see is when the Datepickerrange has text in it(like Select Date/End Date), it doesn’t pops up the calender even on clicking on it.
Any idea whats going on there?

3

Can you create a small example that reproduces the issue?

1 Like
4

@chriddyp
Hey Chris,
Here is a small example. You will see the datepicker range on page 2 of this layout.

#Package Info: dash-core-components==0.13.0-rc8
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
from datetime import datetime as dtime

app = dash.Dash()
vertical = True

app.config['suppress_callback_exceptions']=True
app.layout = html.Div([
            
        html.Div(
            
            dcc.Tabs(
                tabs=[
                    {'label': 'Page1', 'value': 1},
                    {'label': 'Page2', 'value': 2},
                ],
                value=1,
                id='tabs',
                vertical=vertical,
                
            ),
                    style={'width': '20%', 'float': 'left'}
        ),
        
        html.Div(
            html.Div(id='tab-output'),
                    style={'width': '80%', 'float': 'right'}
        ),
         
    ],)

page1 = html.Div(
        
        children = [
                                dcc.Graph(
                                    id = 'graph1',
                                    figure = {
                                        'data': [
#                                            
                                            {'x': [1, 2, 3, 4], 'y': [2, 4, 5, 1], 'type': 'line', 'name': u'H2'},
                                            
                                        ],
                                        'layout': {
                                            'title': 'Graph 1'
                                        }
                                    }
                                )
                            ],
                )
                                        
test = ""
page2 = html.Div([
    
    html.Div(
            [
                    
                    dcc.DatePickerRange(
                                            id='Dr1',
                                            clearable = True,
                                            reopen_calendar_on_clear=True,
                                            start_date_placeholder_text='Select a date',
                                            end_date = dtime.today().strftime("%Y-%m-%d")
                                        ),
                    html.Br(),
                    dcc.Textarea(
                                    id='TextArea',
                                    placeholder='Enter a value...',
                                    value= test,
                                    
                                ),
                    
                    
            ], 
            className="page"
        ),
])
                            

@app.callback(Output('tab-output', 'children'), [Input('tabs', 'value')])
def display_content(value):
    if int(value) == 2:
        return page2
    else:
        return page1
    
@app.callback(
    Output('TextArea', 'value'),
    [Input('Dr1', 'start_date'),
     Input('Dr1', 'end_date')])
def dates_selected(start_date, end_date):
    value = "From- %s  To-   %s"%(start_date,end_date)
    return value
    
if __name__ == '__main__':
    app.run_server(debug=True)

Observations:

  1. When the date picker range field contains text(like Select Date) it doesn’t show the calendar even on clicking on it. It has top be a date format in the field for the calendar to pop up. (Test Case: Try clicking on Select Date: Calendar doesn’t show up but it does of you click on other cell containing date)
  2. When you press ‘x’ to clear calendar, it doesn’t render the callbacks and because both the fields now contain text hence no way to select the date as calendar will not pop up.
5

Thanks for reporting @Izzat! It looks like the issue is just related to when start_date or end_date is None, and not necessarily related to rendering the DatePickerRange inside tabs themselves.

I’ve created a bug issue here https://github.com/plotly/dash-core-components/issues/115 and will update both threads when progress is made on the bug.

2 Likes
6

This is great! Thanks.