How to retrieve content from tabs

Dash Python
1

Hello, I am trying to make 2 Tabs which let the user either select a date using the DatePickerSingle, or they can select a date range using DatePickerRange. I also have a button on my page that when pressed, sends the output (from the current tab) to a Div tag using a callback. This worked pretty well before I added the Tabs, so now I’m just trying to figure out how to make this adaptable.

I’m stuck trying to get the value associated with the date (or date range) picked. Note that I haven’t created the date range yet because I figure that’s easy to figure out once I get the first part done. For now, I’m trying to get the value from the DatePickerSingle which is rendered for the first tab. Once the button is pressed, it should display a string with the country selected and the date picked. When the Range is implemented, I’m going to concatenate the start date and end date into a single string and display that instead of the single date. If anybody could point me in the right direction I would really appreciate it.

Here’s what I have so far:

app.layout = html.Div([ 
    html.Hr(),
    html.Div([
    dcc.Dropdown(
        id='country-dropdown',
        options=[
            {'label':name, 'value':name} for name in countries  ##countries is defined before app layout
        ],
        placeholder='Select a country',
        value=countries[0]
    ),
    ],style={'width':'20%','display':'inline-block'}),

 html.H3('Date Selection Options'),
    dcc.Tabs(id='date-tabs', value='date-selection', children=[
        dcc.Tab(label='Single Date', value='date-selection'),
        dcc.Tab(label='Date Range', value='date-range-selection'),
    ]),
    html.Div(id='tabs-content'),

html.Button('Submit input', id='button-2'),
html.Div(id='output'),
])

#render the content for the tabs
@app.callback(Output('tabs-content', 'children'),
              [Input('date-tabs', 'value')]
)
def render_date_content(tab):
    if tab == 'date-selection':
        return html.Div([
            html.Label('Single Date'),
            dcc.DatePickerSingle(
            id='my-date-picker-single',
                min_date_allowed=dt(2000,1,1),
                max_date_allowed=dt(2019,12,31),
                initial_visible_month=dt.now().date(),
                date=dt.now().date().strftime('%Y-%m-%d'),
                display_format='YYYYMMDD'
            )
        ])

    elif tab == 'date-range-selection':
        return html.Div([
            html.Label('Date Range to pick dates')                   ##I haven't coded this part yet so for now it's just a label
        ])

#update the output below the button
@app.callback(
    Output('output', 'children'),
    [Input('button-2', 'n_clicks')],
    state=[State('country-dropdown', 'value'),
           #State('my-date-picker-single', 'date')                   ##as you can see this is what I had before
           State('date-tabs','children')                             ##I think the problem is here
          ]
)
def update_output(n_clicks, country, date):
    if n_clicks is None:
        return 'Please fill in all data fields.'
    if country is None or date is None:
        ret_opts = []
        if country is None:
            ret_opts.append('country')
        if date is None:
            ret_opts.append('date')
        ret_str = ', '.join(ret_opts)
        return "Please fill in the following: {}".format(ret_str)
    #date = dt.strptime(date, '%Y-%m-%d').strftime('%Y%m%d')          ##I had this before as well which worked before tabs**
    return 'Country:{}, Date:{} and the button has been clicked {} times.'.format(country, date, n_clicks)