diff --git a/package.json b/package.json
index b79747d8..93b7bde0 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
"ramda": "^0.25.0",
"react": "^16.3.2",
"react-copy-to-clipboard": "^5.0.1",
+ "react-datepicker": "^1.5.0",
"react-dev-utils": "^5.0.1",
"react-dom": "^16.3.2",
"react-moment": "^0.7.6",
diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js
index 1fa25940..74af103e 100644
--- a/src/short-urls/CreateShortUrl.js
+++ b/src/short-urls/CreateShortUrl.js
@@ -1,11 +1,13 @@
import React from 'react';
-import './CreateShortUrl.scss';
import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import DatePicker from 'react-datepicker';
import { Collapse } from 'reactstrap';
import ReactTags from 'react-tag-autocomplete';
import { assoc, replace } from 'ramda';
+import './CreateShortUrl.scss';
+import '../../node_modules/react-datepicker/dist/react-datepicker.css'
export default class CreateShortUrl extends React.Component {
state = {
@@ -36,6 +38,12 @@ export default class CreateShortUrl extends React.Component {
onChange={e => this.setState({ [id]: e.target.value })}
{...props}
/>;
+ const createDateInput = (id, placeholder) =>
+ ;
return (
@@ -74,10 +82,10 @@ export default class CreateShortUrl extends React.Component {
- {renderOptionalInput('validSince', 'Enabled since...', 'date')}
+ {createDateInput('validSince', 'Enabled since...')}
- {renderOptionalInput('validUntil', 'Enabled until...', 'date')}
+ {createDateInput('validUntil', 'Enabled until...')}
diff --git a/src/short-urls/CreateShortUrl.scss b/src/short-urls/CreateShortUrl.scss
index c9c2a488..4c4199b9 100644
--- a/src/short-urls/CreateShortUrl.scss
+++ b/src/short-urls/CreateShortUrl.scss
@@ -17,3 +17,8 @@
outline: 0;
@include box-shadow(0 0 0 0.2rem rgba(0,123,255,.25));
}
+
+.react-datepicker__input-container,
+.react-datepicker-wrapper {
+ display: block !important;
+}
diff --git a/yarn.lock b/yarn.lock
index aca87d6e..d3f485fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1509,7 +1509,7 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
-classnames@^2.2.3:
+classnames@^2.2.3, classnames@^2.2.5:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
@@ -6071,6 +6071,15 @@ react-copy-to-clipboard@^5.0.1:
copy-to-clipboard "^3"
prop-types "^15.5.8"
+react-datepicker@^1.5.0:
+ version "1.5.0"
+ resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-1.5.0.tgz#7eacd9609313189c84a21bb7421486054939a4b2"
+ dependencies:
+ classnames "^2.2.5"
+ prop-types "^15.6.0"
+ react-onclickoutside "^6.7.1"
+ react-popper "^0.9.1"
+
react-dev-utils@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.1.tgz#1f396e161fe44b595db1b186a40067289bf06613"
@@ -6115,6 +6124,10 @@ react-moment@^0.7.6:
version "0.7.6"
resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.7.6.tgz#d94e63fe47d07fb794a7fa96a89711e834496c4a"
+react-onclickoutside@^6.7.1:
+ version "6.7.1"
+ resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93"
+
react-popper@^0.10.4:
version "0.10.4"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.10.4.tgz#af2a415ea22291edd504678d7afda8a6ee3295aa"
@@ -6122,6 +6135,13 @@ react-popper@^0.10.4:
popper.js "^1.14.1"
prop-types "^15.6.1"
+react-popper@^0.9.1:
+ version "0.9.5"
+ resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.9.5.tgz#02a24ef3eec33af9e54e8358ab70eb0e331edd05"
+ dependencies:
+ popper.js "^1.14.1"
+ prop-types "^15.6.1"
+
react-reconciler@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"