✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
📊 Dash 2.0 is Arriving. Register here.

[Solved] Date Picker seems to refuse to run nicely when associated with a tab

Hi I’ve been trying to tie a few different features together using tab but noticed that this doesn’t play well with the date picker. MY example code is as follows:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
from datetime import datetime
#two date functions are used, be aware of this, I am a madman
from datetime import date as d

app = dash.Dash()

app.scripts.config.serve_locally = True

vertical = True
app.config['suppress_callback_exceptions']=True

#Data section ---------------------------




#end of Data section ----------------

tabs = [0,1,2]


if not vertical:
    app.layout = html.Div([
        dcc.Tabs(
            tabs=[
                {'label': 'Raw Sentiment and Trend', 'value': 0},
                {'label': 'Key Terms', 'value': 1},
                {'label': 'Text Analysis', 'value': 2}
            ],
            value=3,
            id='tabs',
            vertical=vertical
        ),
        html.Div(id='tab-output')
    ], style={
        'width': '80%',
        'fontFamily': 'Sans-Serif',
        'margin-left': 'auto',
        'margin-right': 'auto'
    })

else:
    app.layout = html.Div([
        html.Div(
            dcc.Tabs(
                tabs=[
                {'label': 'Raw Sentiment and Trend', 'value': 0},
                {'label': 'Key Terms', 'value': 1},
                {'label': 'Text Analysis', 'value': 2}
                ],
                value=3,
                id='tabs',
                vertical=vertical,
                style={
                    'height': '100vh',
                    'borderRight': 'thin lightgrey solid',
                    'textAlign': 'left'
                }
            ),
            style={'width': '20%', 'float': 'left'}
        ),
        html.Div(
            html.Div(id='tab-output'),
            style={'width': '80%', 'float': 'right'}
        )
    ], style={
        'fontFamily': 'Sans-Serif',
        'margin-left': 'auto',
        'margin-right': 'auto',
    })





    tabs[0] = dcc.DatePickerSingle(
    id='date-picker-single',
    date=datetime(1997, 5, 10))


    tabs[1] = html.Div([dcc.DatePickerSingle(
    id='date-picker-single',
    date=datetime(1997, 5, 10))
		])

    tabs[2] = html.Div([dcc.DatePickerSingle(
    id='date-picker-single',
    date=datetime(1997, 5, 10))
		])






@app.callback(Output('tab-output', 'children'), [Input('tabs', 'value')])
def display_content(value):
	display = None

	if value == 0:
		print(tabs[0])
		display = tabs[0]
	elif value ==1:
		print(tabs[1])
		display = tabs[1]
	elif value == 2:
		display = tabs[2]

	print('display is')
	print (display)
	return display


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

It seems to render it unusable.

This fixes it
pip install dash-core-components==0.21.0rc1

1 Like