Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Fixing off by one error in DatePickerRange. #930

Merged
merged 5 commits into from
Mar 4, 2021

Conversation

ravij3
Copy link

@ravij3 ravij3 commented Feb 21, 2021

  1. Fix requires converting max_date_allowed and min_date_allowed into
    moment.js date objects.
  2. Added test to cover the scenario reported in #867

Tested locally with below script

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
# File              : datepicker.py
# Author            : Ravi Jadhav 
# Date              : 19.02.2021
# Last Modified Date: 20.02.2021
# Last Modified By  : Ravi Jadhav
from datetime import date
import dash
import dash_html_components as html
import dash_core_components as dcc
import re

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.DatePickerRange(
        id='my-date-picker-range',
        min_date_allowed=date(2021, 1, 10),
        max_date_allowed=date(2021, 1, 20),
        initial_visible_month=date(2021, 1, 10),
        end_date=date(2021, 1, 19),
        start_date=date(2021, 1, 11)
    ),
    html.Div(id='output-container-date-picker-range')
])


@app.callback(
    dash.dependencies.Output('output-container-date-picker-range', 'children'),
    [dash.dependencies.Input('my-date-picker-range', 'start_date'),
     dash.dependencies.Input('my-date-picker-range', 'end_date')])
def update_output(start_date, end_date):
    string_prefix = 'You have selected: '
    if start_date is not None:
        start_date_object = date.fromisoformat(start_date)
        start_date_string = start_date_object.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'Start Date: ' + start_date_string + ' | '
    if end_date is not None:
        end_date_object = date.fromisoformat(end_date)
        end_date_string = end_date_object.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'End Date: ' + end_date_string
    if len(string_prefix) == len('You have selected: '):
        return 'Select a date to see it displayed here'
    else:
        return string_prefix


if __name__ == '__main__':
    app.run_server(debug=True)

Originally you cant select min and max date as they are off by one. In the below screenshot we can see that both Jan 10th and Jan 20th are selectable.

Before selection

image

After Selection

image

1. Fix requires converting max_date_allowed and min_date_allowed into
moment.js date objects.
2. Added test to cover the scenario reported in [plotly#867](plotly#867)
Copy link
Collaborator

@alexcjohnson alexcjohnson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work @ravij3 - exactly the right fix and a very nice test! 💃

We're having some issues with our visual CI tests (Percy) right now but once we sort those out this should be ready to merge!

@ravij3
Copy link
Author

ravij3 commented Feb 25, 2021

Thanks @alexcjohnson !! I will pick up some other fixes in the meantime.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants