@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:
- 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)
- 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.