From 2020a9c420750e92aeec8e879e80b61a9178717c Mon Sep 17 00:00:00 2001
From: Tomasz Rondio <tomasz.rondio@gmail.com>
Date: Fri, 30 Oct 2020 15:55:07 +0100
Subject: [PATCH] ui framework version bump. Datepicker implementation

---
 .../components/Analytics/FiltersPanel.js      |   9 +-
 .../Analytics/__snapshots__/Analytics.js.snap |  60 ++++++++---
 .../__snapshots__/FiltersPanel.js.snap        |  60 ++++++++---
 .../Automatic/__snapshots__/Automatic.js.snap | 100 +++++++++++++-----
 .../__snapshots__/FilterPanel.js.snap         | 100 +++++++++++++-----
 .../Output/__snapshots__/FilterPane.js.snap   |  68 ++++++++----
 .../Output/__snapshots__/Output.js.snap       |  68 ++++++++----
 client/components/Analytics/FiltersPanel.jsx  |  48 ++++++---
 .../ContentLists/Automatic/FilterPanel.jsx    |  83 ++++++++++-----
 client/components/Output/FilterPane.jsx       |  59 +++++++----
 .../website-management/route-form.html        |  11 +-
 package.json                                  |   2 +-
 12 files changed, 484 insertions(+), 184 deletions(-)

diff --git a/client/__tests__/components/Analytics/FiltersPanel.js b/client/__tests__/components/Analytics/FiltersPanel.js
index 1179879d..18dba15c 100644
--- a/client/__tests__/components/Analytics/FiltersPanel.js
+++ b/client/__tests__/components/Analytics/FiltersPanel.js
@@ -78,18 +78,11 @@ describe("Analytics/FiltersPanel", () => {
       />
     );
 
-    const input = container.querySelector('input[name="published_before"]');
-    fireEvent.change(input, { target: { value: "2020-02-02" } });
-
     const filterButton = getByText("Run Report");
     fireEvent.click(filterButton);
 
     expect(setFilters).toHaveBeenCalled();
-
-    let newFilters = { ...filters };
-    newFilters.published_before = "2020-02-02";
-
-    expect(setFilters).toHaveBeenCalledWith(newFilters);
+    expect(setFilters).toHaveBeenCalledWith(filters);
   });
 
   it("clears filters", () => {
diff --git a/client/__tests__/components/Analytics/__snapshots__/Analytics.js.snap b/client/__tests__/components/Analytics/__snapshots__/Analytics.js.snap
index 78819167..f64a91ac 100644
--- a/client/__tests__/components/Analytics/__snapshots__/Analytics.js.snap
+++ b/client/__tests__/components/Analytics/__snapshots__/Analytics.js.snap
@@ -323,12 +323,30 @@ exports[`Analytics/Analytics renders correctly 1`] = `
                         >
                           From
                         </label>
-                        <input
-                          class="sd-line-input__input"
-                          name="published_after"
-                          type="date"
-                          value=""
-                        />
+                        <span
+                          class="p-calendar p-calendar-w-btn"
+                        >
+                          <input
+                            autocomplete="off"
+                            class="p-inputtext p-component p-inputtext p-component"
+                            type="text"
+                            value=""
+                          />
+                          <button
+                            class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="icon-calendar p-c p-button-icon-left"
+                            />
+                            <span
+                              class="p-button-text p-c"
+                            >
+                              p-btn
+                            </span>
+                          </button>
+                        </span>
                       </div>
                     </div>
                     <div
@@ -342,12 +360,30 @@ exports[`Analytics/Analytics renders correctly 1`] = `
                         >
                           To
                         </label>
-                        <input
-                          class="sd-line-input__input"
-                          name="published_before"
-                          type="date"
-                          value=""
-                        />
+                        <span
+                          class="p-calendar p-calendar-w-btn"
+                        >
+                          <input
+                            autocomplete="off"
+                            class="p-inputtext p-component p-inputtext p-component"
+                            type="text"
+                            value=""
+                          />
+                          <button
+                            class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="icon-calendar p-c p-button-icon-left"
+                            />
+                            <span
+                              class="p-button-text p-c"
+                            >
+                              p-btn
+                            </span>
+                          </button>
+                        </span>
                       </div>
                     </div>
                   </div>
diff --git a/client/__tests__/components/Analytics/__snapshots__/FiltersPanel.js.snap b/client/__tests__/components/Analytics/__snapshots__/FiltersPanel.js.snap
index 27aaa061..fb17924f 100644
--- a/client/__tests__/components/Analytics/__snapshots__/FiltersPanel.js.snap
+++ b/client/__tests__/components/Analytics/__snapshots__/FiltersPanel.js.snap
@@ -132,12 +132,30 @@ exports[`Analytics/FiltersPanel renders correctly 1`] = `
               >
                 From
               </label>
-              <input
-                class="sd-line-input__input"
-                name="published_after"
-                type="date"
-                value="2019-07-04"
-              />
+              <span
+                class="p-calendar p-calendar-w-btn p-inputwrapper-filled"
+              >
+                <input
+                  autocomplete="off"
+                  class="p-inputtext p-component p-inputtext p-component p-filled"
+                  type="text"
+                  value="2019-07-04"
+                />
+                <button
+                  class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <span
+                    class="icon-calendar p-c p-button-icon-left"
+                  />
+                  <span
+                    class="p-button-text p-c"
+                  >
+                    p-btn
+                  </span>
+                </button>
+              </span>
             </div>
           </div>
           <div
@@ -151,12 +169,30 @@ exports[`Analytics/FiltersPanel renders correctly 1`] = `
               >
                 To
               </label>
-              <input
-                class="sd-line-input__input"
-                name="published_before"
-                type="date"
-                value="2019-07-04"
-              />
+              <span
+                class="p-calendar p-calendar-w-btn p-inputwrapper-filled"
+              >
+                <input
+                  autocomplete="off"
+                  class="p-inputtext p-component p-inputtext p-component p-filled"
+                  type="text"
+                  value="2019-07-04"
+                />
+                <button
+                  class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <span
+                    class="icon-calendar p-c p-button-icon-left"
+                  />
+                  <span
+                    class="p-button-text p-c"
+                  >
+                    p-btn
+                  </span>
+                </button>
+              </span>
             </div>
           </div>
         </div>
diff --git a/client/__tests__/components/ContentLists/Automatic/__snapshots__/Automatic.js.snap b/client/__tests__/components/ContentLists/Automatic/__snapshots__/Automatic.js.snap
index c6c5b3d0..6a4a0cc0 100644
--- a/client/__tests__/components/ContentLists/Automatic/__snapshots__/Automatic.js.snap
+++ b/client/__tests__/components/ContentLists/Automatic/__snapshots__/Automatic.js.snap
@@ -134,52 +134,102 @@ exports[`ContentLists/Automatic/Automatic renders properly 1`] = `
                   <label
                     class="sd-line-input__label"
                   >
-                    Published date
+                    Publish date
                   </label>
-                  <input
-                    class="sd-line-input__input"
-                    name="published_at"
-                    type="date"
-                    value="2019-12-28T12:09:32+01:00"
-                  />
+                  <span
+                    class="p-calendar p-calendar-w-btn p-inputwrapper-filled"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="p-inputtext p-component p-inputtext p-component p-filled"
+                      type="text"
+                      value="2019-12-28"
+                    />
+                    <button
+                      class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="icon-calendar p-c p-button-icon-left"
+                      />
+                      <span
+                        class="p-button-text p-c"
+                      >
+                        p-btn
+                      </span>
+                    </button>
+                  </span>
                 </div>
               </div>
               <div
                 class="form__row form__row--flex"
               >
                 <div
-                  class="sd-line-input sd-line-input--no-margin"
+                  class="sd-line-input sd-line-input--no-margin form__row-item"
                 >
                   <label
                     class="sd-line-input__label"
                   >
                     Published after
                   </label>
-                  <input
-                    class="sd-line-input__input"
-                    name="published_after"
-                    type="date"
-                    value=""
-                  />
+                  <span
+                    class="p-calendar p-calendar-w-btn"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="p-inputtext p-component p-inputtext p-component"
+                      type="text"
+                      value=""
+                    />
+                    <button
+                      class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="icon-calendar p-c p-button-icon-left"
+                      />
+                      <span
+                        class="p-button-text p-c"
+                      >
+                        p-btn
+                      </span>
+                    </button>
+                  </span>
                 </div>
-              </div>
-              <div
-                class="form__row form__row--flex"
-              >
                 <div
-                  class="sd-line-input sd-line-input--no-margin"
+                  class="form__row-item sd-line-input sd-line-input--no-margin"
                 >
                   <label
                     class="sd-line-input__label"
                   >
                     Published before
                   </label>
-                  <input
-                    class="sd-line-input__input"
-                    name="published_before"
-                    type="date"
-                    value=""
-                  />
+                  <span
+                    class="p-calendar p-calendar-w-btn"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="p-inputtext p-component p-inputtext p-component"
+                      type="text"
+                      value=""
+                    />
+                    <button
+                      class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="icon-calendar p-c p-button-icon-left"
+                      />
+                      <span
+                        class="p-button-text p-c"
+                      >
+                        p-btn
+                      </span>
+                    </button>
+                  </span>
                 </div>
               </div>
               <div
diff --git a/client/__tests__/components/ContentLists/Automatic/__snapshots__/FilterPanel.js.snap b/client/__tests__/components/ContentLists/Automatic/__snapshots__/FilterPanel.js.snap
index 148fdced..97ef95eb 100644
--- a/client/__tests__/components/ContentLists/Automatic/__snapshots__/FilterPanel.js.snap
+++ b/client/__tests__/components/ContentLists/Automatic/__snapshots__/FilterPanel.js.snap
@@ -75,52 +75,102 @@ exports[`ContentLists/Automatic/FilterPanel renders properly 1`] = `
             <label
               class="sd-line-input__label"
             >
-              Published date
+              Publish date
             </label>
-            <input
-              class="sd-line-input__input"
-              name="published_at"
-              type="date"
-              value=""
-            />
+            <span
+              class="p-calendar p-calendar-w-btn"
+            >
+              <input
+                autocomplete="off"
+                class="p-inputtext p-component p-inputtext p-component"
+                type="text"
+                value=""
+              />
+              <button
+                class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="icon-calendar p-c p-button-icon-left"
+                />
+                <span
+                  class="p-button-text p-c"
+                >
+                  p-btn
+                </span>
+              </button>
+            </span>
           </div>
         </div>
         <div
           class="form__row form__row--flex"
         >
           <div
-            class="sd-line-input sd-line-input--no-margin"
+            class="sd-line-input sd-line-input--no-margin form__row-item"
           >
             <label
               class="sd-line-input__label"
             >
               Published after
             </label>
-            <input
-              class="sd-line-input__input"
-              name="published_after"
-              type="date"
-              value=""
-            />
+            <span
+              class="p-calendar p-calendar-w-btn"
+            >
+              <input
+                autocomplete="off"
+                class="p-inputtext p-component p-inputtext p-component"
+                type="text"
+                value=""
+              />
+              <button
+                class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="icon-calendar p-c p-button-icon-left"
+                />
+                <span
+                  class="p-button-text p-c"
+                >
+                  p-btn
+                </span>
+              </button>
+            </span>
           </div>
-        </div>
-        <div
-          class="form__row form__row--flex"
-        >
           <div
-            class="sd-line-input sd-line-input--no-margin"
+            class="form__row-item sd-line-input sd-line-input--no-margin"
           >
             <label
               class="sd-line-input__label"
             >
               Published before
             </label>
-            <input
-              class="sd-line-input__input"
-              name="published_before"
-              type="date"
-              value=""
-            />
+            <span
+              class="p-calendar p-calendar-w-btn"
+            >
+              <input
+                autocomplete="off"
+                class="p-inputtext p-component p-inputtext p-component"
+                type="text"
+                value=""
+              />
+              <button
+                class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="icon-calendar p-c p-button-icon-left"
+                />
+                <span
+                  class="p-button-text p-c"
+                >
+                  p-btn
+                </span>
+              </button>
+            </span>
           </div>
         </div>
         <div
diff --git a/client/__tests__/components/Output/__snapshots__/FilterPane.js.snap b/client/__tests__/components/Output/__snapshots__/FilterPane.js.snap
index 837f5afa..229dc957 100644
--- a/client/__tests__/components/Output/__snapshots__/FilterPane.js.snap
+++ b/client/__tests__/components/Output/__snapshots__/FilterPane.js.snap
@@ -67,38 +67,70 @@ exports[`Output/FilterPane renders properly 1`] = `
           class="form__row form__row--flex"
         >
           <div
-            class="sd-line-input sd-line-input--no-margin"
+            class="sd-line-input sd-line-input--no-margin form__row-item"
           >
             <label
               class="sd-line-input__label"
             >
               Published after
             </label>
-            <input
-              class="sd-line-input__input"
-              name="published_after"
-              type="date"
-              value=""
-            />
+            <span
+              class="p-calendar p-calendar-w-btn"
+            >
+              <input
+                autocomplete="off"
+                class="p-inputtext p-component p-inputtext p-component"
+                type="text"
+                value=""
+              />
+              <button
+                class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="icon-calendar p-c p-button-icon-left"
+                />
+                <span
+                  class="p-button-text p-c"
+                >
+                  p-btn
+                </span>
+              </button>
+            </span>
           </div>
-        </div>
-        <div
-          class="form__row form__row--flex"
-        >
           <div
-            class="sd-line-input sd-line-input--no-margin"
+            class="form__row-item sd-line-input sd-line-input--no-margin"
           >
             <label
               class="sd-line-input__label"
             >
               Published before
             </label>
-            <input
-              class="sd-line-input__input"
-              name="published_before"
-              type="date"
-              value=""
-            />
+            <span
+              class="p-calendar p-calendar-w-btn"
+            >
+              <input
+                autocomplete="off"
+                class="p-inputtext p-component p-inputtext p-component"
+                type="text"
+                value=""
+              />
+              <button
+                class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="icon-calendar p-c p-button-icon-left"
+                />
+                <span
+                  class="p-button-text p-c"
+                >
+                  p-btn
+                </span>
+              </button>
+            </span>
           </div>
         </div>
         <div
diff --git a/client/__tests__/components/Output/__snapshots__/Output.js.snap b/client/__tests__/components/Output/__snapshots__/Output.js.snap
index 9f041c75..0e2161ee 100644
--- a/client/__tests__/components/Output/__snapshots__/Output.js.snap
+++ b/client/__tests__/components/Output/__snapshots__/Output.js.snap
@@ -285,38 +285,70 @@ exports[`Output/Output renders properly 1`] = `
               class="form__row form__row--flex"
             >
               <div
-                class="sd-line-input sd-line-input--no-margin"
+                class="sd-line-input sd-line-input--no-margin form__row-item"
               >
                 <label
                   class="sd-line-input__label"
                 >
                   Published after
                 </label>
-                <input
-                  class="sd-line-input__input"
-                  name="published_after"
-                  type="date"
-                  value=""
-                />
+                <span
+                  class="p-calendar p-calendar-w-btn"
+                >
+                  <input
+                    autocomplete="off"
+                    class="p-inputtext p-component p-inputtext p-component"
+                    type="text"
+                    value=""
+                  />
+                  <button
+                    class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="icon-calendar p-c p-button-icon-left"
+                    />
+                    <span
+                      class="p-button-text p-c"
+                    >
+                      p-btn
+                    </span>
+                  </button>
+                </span>
               </div>
-            </div>
-            <div
-              class="form__row form__row--flex"
-            >
               <div
-                class="sd-line-input sd-line-input--no-margin"
+                class="form__row-item sd-line-input sd-line-input--no-margin"
               >
                 <label
                   class="sd-line-input__label"
                 >
                   Published before
                 </label>
-                <input
-                  class="sd-line-input__input"
-                  name="published_before"
-                  type="date"
-                  value=""
-                />
+                <span
+                  class="p-calendar p-calendar-w-btn"
+                >
+                  <input
+                    autocomplete="off"
+                    class="p-inputtext p-component p-inputtext p-component"
+                    type="text"
+                    value=""
+                  />
+                  <button
+                    class="p-button p-component p-datepicker-trigger p-calendar-button p-button-icon-only"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="icon-calendar p-c p-button-icon-left"
+                    />
+                    <span
+                      class="p-button-text p-c"
+                    >
+                      p-btn
+                    </span>
+                  </button>
+                </span>
               </div>
             </div>
             <div
diff --git a/client/components/Analytics/FiltersPanel.jsx b/client/components/Analytics/FiltersPanel.jsx
index 00d9d7af..27e2bb92 100644
--- a/client/components/Analytics/FiltersPanel.jsx
+++ b/client/components/Analytics/FiltersPanel.jsx
@@ -4,6 +4,7 @@ import _ from "lodash";
 import moment from "moment";
 import { Button, IconButton } from "superdesk-ui-framework/react";
 import MultiSelect from "../UI/MultiSelect";
+import { DatePicker } from "superdesk-ui-framework/react";
 
 class FiltersPanel extends React.Component {
   constructor(props) {
@@ -229,32 +230,51 @@ class FiltersPanel extends React.Component {
                   <div className="form__row-item">
                     <div className="sd-line-input sd-line-input--no-margin">
                       <label className="sd-line-input__label">From</label>
-                      <input
-                        className="sd-line-input__input"
-                        type="date"
-                        onChange={this.handleInputChange}
-                        name="published_after"
+                      <DatePicker
                         value={
                           this.state.filters.published_after
-                            ? this.state.filters.published_after
-                            : ""
+                            ? moment(
+                                this.state.filters.published_after,
+                                "YYYY-MM-DD"
+                              ).toDate()
+                            : null
                         }
+                        dateFormat="YYYY-MM-DD"
+                        onChange={(date) => {
+                          let stringDate = moment(date).format("YYYY-MM-DD");
+
+                          this.handleInputChange({
+                            target: {
+                              name: "published_after",
+                              value: stringDate,
+                            },
+                          });
+                        }}
                       />
                     </div>
                   </div>
                   <div className="form__row-item">
                     <div className="sd-line-input sd-line-input--no-margin">
                       <label className="sd-line-input__label">To</label>
-                      <input
-                        className="sd-line-input__input"
-                        type="date"
-                        onChange={this.handleInputChange}
-                        name="published_before"
+                      <DatePicker
                         value={
                           this.state.filters.published_before
-                            ? this.state.filters.published_before
-                            : ""
+                            ? moment(
+                                this.state.filters.published_before,
+                                "YYYY-MM-DD"
+                              ).toDate()
+                            : null
                         }
+                        dateFormat="YYYY-MM-DD"
+                        onChange={(date) => {
+                          let stringDate = moment(date).format("YYYY-MM-DD");
+                          this.handleInputChange({
+                            target: {
+                              name: "published_before",
+                              value: stringDate,
+                            },
+                          });
+                        }}
                       />
                     </div>
                   </div>
diff --git a/client/components/ContentLists/Automatic/FilterPanel.jsx b/client/components/ContentLists/Automatic/FilterPanel.jsx
index 195c415c..855c1bc1 100644
--- a/client/components/ContentLists/Automatic/FilterPanel.jsx
+++ b/client/components/ContentLists/Automatic/FilterPanel.jsx
@@ -1,8 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 import _ from "lodash";
+import moment from "moment";
 import { Button, IconButton, Dropdown } from "superdesk-ui-framework/react";
 import MultiSelect from "../../UI/MultiSelect";
+import { DatePicker } from "superdesk-ui-framework/react";
 
 class FilterPanel extends React.Component {
   constructor(props) {
@@ -430,53 +432,82 @@ class FilterPanel extends React.Component {
 
               <div className="form__row form__row--flex">
                 <div className="sd-line-input sd-line-input--no-margin">
-                  <label className="sd-line-input__label">Published date</label>
-                  <input
-                    className="sd-line-input__input"
-                    type="date"
-                    onChange={this.handleInputChange}
-                    name="published_at"
+                  <label className="sd-line-input__label">Publish date</label>
+                  <DatePicker
                     value={
                       this.state.filters.published_at
-                        ? this.state.filters.published_at
-                        : ""
+                        ? moment(
+                            this.state.filters.published_at,
+                            "YYYY-MM-DD"
+                          ).toDate()
+                        : null
                     }
+                    dateFormat="YYYY-MM-DD"
+                    onChange={(date) => {
+                      let stringDate = moment(date).format("YYYY-MM-DD");
+
+                      this.handleInputChange({
+                        target: {
+                          name: "published_at",
+                          value: stringDate,
+                        },
+                      });
+                    }}
                   />
                 </div>
               </div>
               <div className="form__row form__row--flex">
-                <div className="sd-line-input sd-line-input--no-margin">
+                <div className="sd-line-input sd-line-input--no-margin form__row-item">
                   <label className="sd-line-input__label">
                     Published after
                   </label>
-                  <input
-                    className="sd-line-input__input"
-                    type="date"
-                    onChange={this.handleInputChange}
-                    name="published_after"
+                  <DatePicker
                     value={
                       this.state.filters.published_after
-                        ? this.state.filters.published_after
-                        : ""
+                        ? moment(
+                            this.state.filters.published_after,
+                            "YYYY-MM-DD"
+                          ).toDate()
+                        : null
                     }
+                    dateFormat="YYYY-MM-DD"
+                    onChange={(date) => {
+                      let stringDate = moment(date).format("YYYY-MM-DD");
+
+                      this.handleInputChange({
+                        target: {
+                          name: "published_after",
+                          value: stringDate,
+                        },
+                      });
+                    }}
                   />
                 </div>
-              </div>
-              <div className="form__row form__row--flex">
-                <div className="sd-line-input sd-line-input--no-margin">
+
+                <div className="form__row-item sd-line-input sd-line-input--no-margin">
                   <label className="sd-line-input__label">
                     Published before
                   </label>
-                  <input
-                    className="sd-line-input__input"
-                    type="date"
-                    onChange={this.handleInputChange}
-                    name="published_before"
+                  <DatePicker
                     value={
                       this.state.filters.published_before
-                        ? this.state.filters.published_before
-                        : ""
+                        ? moment(
+                            this.state.filters.published_before,
+                            "YYYY-MM-DD"
+                          ).toDate()
+                        : null
                     }
+                    dateFormat="YYYY-MM-DD"
+                    onChange={(date) => {
+                      let stringDate = moment(date).format("YYYY-MM-DD");
+
+                      this.handleInputChange({
+                        target: {
+                          name: "published_before",
+                          value: stringDate,
+                        },
+                      });
+                    }}
                   />
                 </div>
               </div>
diff --git a/client/components/Output/FilterPane.jsx b/client/components/Output/FilterPane.jsx
index a9b130ac..97fc209c 100644
--- a/client/components/Output/FilterPane.jsx
+++ b/client/components/Output/FilterPane.jsx
@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-
-import { Button, IconButton } from "superdesk-ui-framework/react";
+import moment from "moment";
+import { Button, IconButton, DatePicker } from "superdesk-ui-framework/react";
 
 import MultiSelect from "../UI/MultiSelect";
 import Store from "./Store";
@@ -245,38 +245,57 @@ class FilterPane extends React.Component {
                     </div>
                   </div>
                   <div className="form__row form__row--flex">
-                    <div className="sd-line-input sd-line-input--no-margin">
+                    <div className="sd-line-input sd-line-input--no-margin form__row-item">
                       <label className="sd-line-input__label">
                         Published after
                       </label>
-                      <input
-                        className="sd-line-input__input"
-                        type="date"
-                        onChange={this.handleInputChange}
-                        name="published_after"
+                      <DatePicker
                         value={
                           this.state.filters.published_after
-                            ? this.state.filters.published_after
-                            : ""
+                            ? moment(
+                                this.state.filters.published_after,
+                                "YYYY-MM-DD"
+                              ).toDate()
+                            : null
                         }
+                        dateFormat="YYYY-MM-DD"
+                        onChange={(date) => {
+                          let stringDate = moment(date).format("YYYY-MM-DD");
+
+                          this.handleInputChange({
+                            target: {
+                              name: "published_after",
+                              value: stringDate,
+                            },
+                          });
+                        }}
                       />
                     </div>
-                  </div>
-                  <div className="form__row form__row--flex">
-                    <div className="sd-line-input sd-line-input--no-margin">
+
+                    <div className="form__row-item sd-line-input sd-line-input--no-margin">
                       <label className="sd-line-input__label">
                         Published before
                       </label>
-                      <input
-                        className="sd-line-input__input"
-                        type="date"
-                        onChange={this.handleInputChange}
-                        name="published_before"
+                      <DatePicker
                         value={
                           this.state.filters.published_before
-                            ? this.state.filters.published_before
-                            : ""
+                            ? moment(
+                                this.state.filters.published_before,
+                                "YYYY-MM-DD"
+                              ).toDate()
+                            : null
                         }
+                        dateFormat="YYYY-MM-DD"
+                        onChange={(date) => {
+                          let stringDate = moment(date).format("YYYY-MM-DD");
+
+                          this.handleInputChange({
+                            target: {
+                              name: "published_before",
+                              value: stringDate,
+                            },
+                          });
+                        }}
                       />
                     </div>
                   </div>
diff --git a/client/views/settings/website-management/route-form.html b/client/views/settings/website-management/route-form.html
index 3c4ad22c..a02e43cf 100644
--- a/client/views/settings/website-management/route-form.html
+++ b/client/views/settings/website-management/route-form.html
@@ -50,11 +50,12 @@
 
         <div class="item">
           <label for="routeDescription" translate>description</label>
-          <input 
-            type="text" 
-            class="line-input" 
-            id="routeDescription" 
-            ng-model="newRoute.description">
+          <input
+            type="text"
+            class="line-input"
+            id="routeDescription"
+            ng-model="newRoute.description"
+          />
         </div>
 
         <div
diff --git a/package.json b/package.json
index 2c207ee3..cbf1479c 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "react-infinite-scroll-component": "^5.0.4",
     "react-select": "^3.0.4",
     "react-virtualized": "^9.22.2",
-    "superdesk-ui-framework": "^2.2.6"
+    "superdesk-ui-framework": "^2.2.9"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.4.4",