# Date Range picker

**URL:** <https://community.plotly.com/t/date-range-picker/80807>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [December 9, 2023, 4:07pm UTC](https://community.plotly.com/t/date-range-picker/80807 "2023-12-09T16:07:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![puns](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@puns](https://community.plotly.com/u/puns)\
**Post date:** [December 9, 2023, 4:07pm UTC](https://community.plotly.com/t/date-range-picker/80807/1 "2023-12-09T16:07:34Z")

</div>

Hello all !

I am trying to build this web app for practice. I am using a date range picker where the app should be able to populate a graph of cumulative returns of SPY during the time period selected.

Problem,: I am unable to select dates, only few dates can be selected by default. Also I am getting this warning :

```auto
A value is trying to be set on a copy of a slice from a DataFrame.
Try using .loc[row_indexer,col_indexer] = value instead

```

I would appreciate any help, Thanks ! I have the code below –

```auto
import pandas as pd
import plotly.express as px
import seaborn as sns
import yfinance as yf

spy = yf.download("SPY",start = "2000-01-01", end = "2023-12-01" )
spy = spy.reset_index().head()

from dash import Dash, html, dcc
import dash_daq as daq
from dash.dependencies import Output, Input
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc
from dash_bootstrap_templates import load_figure_template
from datetime import datetime
from datetime import date

load_figure_template("SLATE")

app = Dash( __name__ ,external_stylesheets=[dbc.themes.SLATE])

app.layout = html.Div([
    
    dbc.Row([
        
        html.H2("SPY Returns", style = {"text-align":"center"}),
        
        dbc.Col([
            html.Div([
            html.H4("Pick a Date"), 
            dcc.DatePickerRange(
                id = "date_picker",
                min_date_allowed = spy["Date"].min(),
                max_date_allowed = spy["Date"].max(),
                initial_visible_month = spy["Date"].max(),
                start_date = spy["Date"].min(),
                end_date = spy["Date"].min())
            
        ]),
            dbc.Col([
                html.Div([
                    dcc.Graph(id = "graph")
                ])
                
            ])
    ])
    
    ])
    
])

@app.callback(
        Output("graph","figure"),
        [Input("date_picker", "start_date"), Input("date_picker", "end_date")]
        )

def plot_graph(start_date, end_date):
    df = spy.loc[spy["Date"].between(start_date, end_date)]
    df["returns"] = df["Adj Close"].pct_change(1).dropna()
    df["cum_returns"] = (1 + df["returns"].cumprod()-1)*100
    #pct_return = df["cum_returns"].iloc[-1]-df["cum_returns"].iloc[0] 
    
    fig = px.line(df,
                 x = df["Date"],
                 y = "cum_returns",
                 title = "Cumulate SPY Returns %")
    return fig

if __name__ == " __main__":
    app.run(debug= True, port = 2525, jupyter_mode = 'external')

```

---

<div class="post-metadata">

**Author:** ![Berbere](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/berbere/32/25940_2.png) [@Berbere](https://community.plotly.com/u/Berbere)\
**Post date:** [December 10, 2023, 8:11am UTC](https://community.plotly.com/t/date-range-picker/80807/2 "2023-12-10T08:11:06Z")

</div>

Hello again @puns,

you need to get rid of `head()` from the code below.

```auto
spy = yf.download("SPY",start = "2000-01-01", end = "2023-12-01" )
spy = spy.reset_index().head()

```

Cheers!

---

<div class="post-metadata">

**Author:** ![puns](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@puns](https://community.plotly.com/u/puns)\
**Post date:** [December 11, 2023, 3:53pm UTC](https://community.plotly.com/t/date-range-picker/80807/3 "2023-12-11T15:53:14Z")

</div>

Hey, thanks a lot Berbere!!