Multipage app not updating current date in datepicker on webpage load

Dash Python
1

plotly 5.18.0
dash 2.14.1

multipage does not updating current date on page load (only after restart of container)

#app

def app_layout():
    return html.Div(
        id="main",
        children=[
            html.Div(
                id="cont",
                className="container",
                children=[
                    dcc.Location(id="url", refresh=False),
                    # Sidebar Section
                    side_bar(),
                    # Main Content
                    dmc.Container(
                        dash.page_container,
                        className="main",
                        pt=30,
                        px=5,
                        fluid=True,
                    ),
                ],
                lang="en",
            )
        ],
    )


app.layout = app_layout

#page

register_page(
    __name__,
    path="/daily-returns",
    title="Daily Returns",
)
def make_layout():
    return html.Div(
        className="main-subpage",
        children=[
            # First Container
            dmc.Container(
                children=[
                    html.Div(
                        [
                            dcc.Loading(graph_daily_returns, type="graph"),
                        ],
                    ),
                ],
                className="chart-container",
                size="100%",
            ),
            # Second Container
            dmc.Container(
                html.Div(
                    id="right-content",
                    children=right_daily_returns_layout,
                    className="right-section",
                ),
                className="main-right-container",
            ),
        ],
    )


layout = make_layout

@callback(
    Output("daily-returns-line-chart", "figure"),
    Input("multiselect-ticker-daily-returns", "value"),
    Input("start-date-daily-returns", "value"),
    Input("end-date-daily-returns", "value"),
   
    background=True,
    suppress_callback_exceptions=True,
)
def update_daily_returns_line_chart(symbols, start_date, end_date):
    fig = go.Figure()

#right_daily_returns_layout (datepicker end)

dmc.DatePicker(
                label="Set end date",
                value=datetime.now().date(),
                id="end-date-daily-returns",
                required=True,
                clearable=False,
                inputFormat="DD-MM-YYYY",
                maxDate=datetime.now().date(),
            ),
2

Hello @rafalsza,

I believe this is due to the nature of how your app is setup, in order to populate a current date of the app, you’ll need to turn the layout into a function to populate.

Assuming your right_returns_layout is a variable that is only populated once from the function, this isn’t being triggered to populate again during the layout function.

3

you mean layout = make_layout() ? on page

4

No, I mean the function where you are setting the date, in your layout it looks like a static variable instead of function that gets call each time.

Wherever you are setting this variable, the function is only being called once, upon app startup.

5

so I need to add callback on page to update end date? like:

@callback(
    Output("end-date-daily-returns", "value"),
    Input("end-date-daily-returns", "value"),
)
def update_end_date_on_load(start_date):
    return datetime.now().date()
6

I think here needs to turn into a function…

What you suggested would work as well, but an unnecessary call.

7

so something like:

# Second Container
            dmc.Container(
                html.Div(
                    id="right-content",
                    children=generate_right_daily_returns_layout(),
                    className="right-section",
                ),
                className="main-right-container",
            ),
8

Correct, this should update the date each time the user reloads the layout.

9

I will check it , updated app on container and wait for tommorow.
Strange is that I thought that layout = make_layout will update layout on page load

10

Make_layout would be a function, but if you have a variable that represents the datePicker, it will not update because it is just a variable that is set at one time.

To make it update, it needs to be a function…

1 Like
11

yes, it worked, thank you

1 Like
12

@ jinnyzor

I have the same issue but I’m not able to understand the solution, however, I wrote my layout code with this fix, and I will need to wait for tomorrow to see if it works.

Code Below:

def get_current_date():
    date=datetime.now().date()
    return date



def create_schedule_layout():

    date=datetime.now().date()

    print ("\n\n\n\n******************applayout.create_layout " + str(date) + "\n\n\n")
    calendar = dcc.DatePickerSingle(id='search_calendar_schedule',
                                    month_format='MMM Do, YY',
                                    placeholder='MMM Do, YY',
                                    date=get_current_date())

    calendar_div = html.Div([calendar])

    button = dbc.Button("Retrieve", id="retrive_button", className="me-2", n_clicks=0)

    button_new = dbc.Button("Update", id="update_schedule",color="success",className="me-2", n_clicks=0)

    table_place_holder = html.Div(id='table_schedule', style={'margin-top': '20px'})

    warning_placeholder=html.Div(id='warning_placeholder_schedule', style={'margin-top': '20px'})
    

    search_layout = html.Div([
        dbc.Row([
            dbc.Col([calendar_div], width=1),  # Calendar column
            dbc.Col([button], width=1)  # Button column
        ]),  # Add no_gutters=True to reduce space between columns
        dbc.Row([
            dbc.Col([table_place_holder,warning_placeholder], width=12),  # Data table in a separate row
            dbc.Col([button_new], width=2)
        ])
    ])
    return search_layout

I don’t understand the difference between calling the function get_current_date() instead of writing in the date argument datetime.now().date() is this not gonna get to the same point?

I have a multipage app so I would like to update the date of each app every time a user enters to each page

13

Hello @seventy77,

Yes, this should work. I dont see how you are calling this function though, so if you have it like this:

dash.register_page(__name__, layout=create_schedule_layout())

It wont work, it needs to be like this:

dash.register_page(__name__, layout=create_schedule_layout)