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

**URL:** <https://community.plotly.com/t/solved-date-picker-seems-to-refuse-to-run-nicely-when-associated-with-a-tab/8966>\
**Category:** Dash Python\
**Created:** [March 14, 2018, 7:09pm UTC](https://community.plotly.com/t/solved-date-picker-seems-to-refuse-to-run-nicely-when-associated-with-a-tab/8966 "2018-03-14T19:09:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![East](https://avatars.discourse-cdn.com/v4/letter/e/e95f7d/32.png) [@East](https://community.plotly.com/u/East)\
**Post date:** [March 14, 2018, 7:09pm UTC](https://community.plotly.com/t/solved-date-picker-seems-to-refuse-to-run-nicely-when-associated-with-a-tab/8966/1 "2018-03-14T19:09:58Z")

</div>

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.

 ![example](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/a/afda7f3ce7d6156b014d74c1c01324f93d314dcf.png)

---

<div class="post-metadata">

**Author:** ![East](https://avatars.discourse-cdn.com/v4/letter/e/e95f7d/32.png) [@East](https://community.plotly.com/u/East)\
**Post date:** [March 14, 2018, 8:38pm UTC](https://community.plotly.com/t/solved-date-picker-seems-to-refuse-to-run-nicely-when-associated-with-a-tab/8966/2 "2018-03-14T20:38:49Z")

</div>

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