PersistenceTransforms for date in datePickerRange and datePickerSingle

.circleci/config.yml

@@ -80,7 +80,7 @@ jobs:
           command: |
             . venv/bin/activate && mkdir packages
             # build main dash
-            git clone --depth 1 https://github.com/plotly/dash.git dash-main
+            git clone -b persistence-hg --depth 1 https://github.com/plotly/dash.git dash-main
             cd dash-main && pip install -e .[dev] --progress-bar off && python setup.py sdist && mv dist/* ../packages/
             cd dash-renderer && npm ci && npm run build
             python setup.py sdist && mv dist/* ../../packages/ && cd ../..

src/components/DatePickerRange.react.js

@@ -1,8 +1,11 @@
 import PropTypes from 'prop-types';
 import React, {Component, lazy, Suspense} from 'react';
 import datePickerRange from '../utils/LazyLoader/datePickerRange';
+import transformDate from '../utils/DatePickerPersistence';
 
 const RealDatePickerRange = lazy(datePickerRange);
+const end_date = transformDate;
+const start_date = transformDate;
 
 /**
  * DatePickerRange is a tailor made component designed for selecting
@@ -263,6 +266,11 @@ DatePickerRange.propTypes = {
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
 };
 
+DatePickerRange.persistenceTransforms = {
+    end_date,
+    start_date,
+};
+
 DatePickerRange.defaultProps = {
     calendar_orientation: 'horizontal',
     is_RTL: false,

src/components/DatePickerSingle.react.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {Component, lazy, Suspense} from 'react';
 import datePickerSingle from '../utils/LazyLoader/datePickerSingle';
+import date from '../utils/DatePickerPersistence';
 
 const RealDateSingleRange = lazy(datePickerSingle);
 
@@ -220,6 +221,10 @@ DatePickerSingle.propTypes = {
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
 };
 
+DatePickerSingle.persistenceTransforms = {
+    date,
+};
+
 DatePickerSingle.defaultProps = {
     calendar_orientation: 'horizontal',
     is_RTL: false,

src/utils/DatePickerPersistence.js

@@ -0,0 +1,14 @@
+import moment from 'moment';
+import {isNil} from 'ramda';
+
+export default {
+    extract: propValue => {
+        if (!isNil(propValue)) {
+            return moment(propValue)
+                .startOf('day')
+                .format('YYYY-MM-DD');
+        }
+        return propValue;
+    },
+    apply: storedValue => storedValue,
+};

tests/integration/calendar/test_date_picker_persistence.py

@@ -0,0 +1,87 @@
+from datetime import datetime
+
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output
+
+
+def test_rdpr001_persisted_dps(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            html.Button("fire callback", id="btn", n_clicks=1),
+            html.Div(children=[html.Div(id="container"), html.P("dps", id="dps-p")]),
+        ]
+    )
+
+    # changing value of date with each callback to verify
+    # persistenceTransforms is stripping the time-part from the date-time
+    @app.callback(Output("container", "children"), [Input("btn", "n_clicks")])
+    def update_output(value):
+        return dcc.DatePickerSingle(
+            id="dps",
+            min_date_allowed=datetime(2020, 1, 1),
+            max_date_allowed=datetime(2020, 1, 7),
+            date=datetime(2020, 1, 3, 1, 1, 1, value),
+            persistence=True,
+            persistence_type="session",
+        )
+
+    @app.callback(Output("dps-p", "children"), [Input("dps", "date")])
+    def display_dps(value):
+        return value
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.select_date_single("dps", day="2")
+    dash_dcc.wait_for_text_to_equal("#dps-p", "2020-01-02")
+    dash_dcc.find_element("#btn").click()
+    dash_dcc.wait_for_text_to_equal("#dps-p", "2020-01-02")
+
+
+def test_rdpr002_persisted_dpr(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            html.Button("fire callback", id="btn", n_clicks=1),
+            html.Div(
+                children=[
+                    html.Div(id="container"),
+                    html.P("dpr", id="dpr-p-start"),
+                    html.P("dpr", id="dpr-p-end"),
+                ]
+            ),
+        ]
+    )
+
+    # changing value of start_date and end_date with each callback to verify
+    # persistenceTransforms is stripping the time-part from the date-time
+    @app.callback(Output("container", "children"), [Input("btn", "n_clicks")])
+    def update_output(value):
+        return dcc.DatePickerRange(
+            id="dpr",
+            min_date_allowed=datetime(2020, 1, 1),
+            max_date_allowed=datetime(2020, 1, 7),
+            start_date=datetime(2020, 1, 3, 1, 1, 1, value),
+            end_date=datetime(2020, 1, 4, 1, 1, 1, value),
+            persistence=True,
+            persistence_type="session",
+        )
+
+    @app.callback(Output("dpr-p-start", "children"), [Input("dpr", "start_date")])
+    def display_dpr_start(value):
+        return value
+
+    @app.callback(Output("dpr-p-end", "children"), [Input("dpr", "end_date")])
+    def display_dpr_end(value):
+        return value
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.select_date_range("dpr", (2, 5))
+    dash_dcc.wait_for_text_to_equal("#dpr-p-start", "2020-01-02")
+    dash_dcc.wait_for_text_to_equal("#dpr-p-end", "2020-01-05")
+    dash_dcc.find_element("#btn").click()
+    dash_dcc.wait_for_text_to_equal("#dpr-p-start", "2020-01-02")
+    dash_dcc.wait_for_text_to_equal("#dpr-p-end", "2020-01-05")