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"