tweaks the styles for the date, adds default min/max time for example sake

src/client/components/forms/field-types/DateTime/index.js

@@ -7,7 +7,7 @@ import Label from '../../Label';
 import Error from '../../Error';
 import CalendarIcon from '../../../graphics/Calendar';
 
-import './react-datepicker.scss';
+import 'react-datepicker/dist/react-datepicker.css';
 import './index.scss';
 
 const defaultError = 'Please fill in the field with a valid date';
@@ -30,7 +30,7 @@ const DateTime = (props) => {
     minDate,
     maxDate,
     monthsShown,
-    useTime: showTimeSelect,
+    useTime,
     minTime,
     maxTime,
     timeIntervals,
@@ -50,12 +50,19 @@ const DateTime = (props) => {
     validate,
   });
 
+  let dateTimeFormat = inputDateTimeFormat;
+  if (!dateTimeFormat) {
+    if (useTime && useDate) dateTimeFormat = 'MMM d, yyy h:mma';
+    else if (useTime) dateTimeFormat = 'h:mma';
+    else dateTimeFormat = 'MMM d, yyy';
+  }
+
   const dateTimePickerProps = {
     minDate,
     maxDate,
-    dateFormat: inputDateTimeFormat,
+    dateFormat: dateTimeFormat,
     monthsShown: Math.min(2, monthsShown),
-    showTimeSelect,
+    showTimeSelect: useTime,
     minTime,
     maxTime,
     timeIntervals,
@@ -114,13 +121,13 @@ DateTime.defaultProps = {
   // date specific props
   useDate: true,
   minDate: new Date(),
-  maxDate: undefined,
+  maxDate: null,
   monthsShown: 1,
-  inputDateTimeFormat: 'MMM d, yyy',
+  inputDateTimeFormat: '',
   // time specific props
   useTime: false,
-  minTime: null,
-  maxTime: null,
+  minTime: new Date('4040-01-01T01:00:00'),
+  maxTime: new Date('4040-01-01T24:00:00'),
   timeIntervals: 30,
   timeFormat: 'h:mm aa',
 };

src/client/components/forms/field-types/DateTime/index.scss

@@ -1,6 +1,6 @@
 @import '../shared';
 
-$cal-icon-width: 24px;
+$cal-icon-width: 18px;
 
 .date-time-picker {
 
@@ -24,10 +24,7 @@ $cal-icon-width: 24px;
       transform: translateY(-50%);
       width: $cal-icon-width;
       height: auto;
-
-      path {
-        fill: $black;
-      }
+      @include color-svg($black);
     }
   }
 
@@ -77,18 +74,36 @@ $cal-icon-width: 24px;
     }
 
     &__navigation {
+      background: none;
+      line-height: 1.7rem;
+      text-align: center;
+      cursor: pointer;
+      position: absolute;
+      top: 10px;
+      width: 0;
+      padding: 0;
+      border: 0.45rem solid transparent;
+      z-index: 1;
+      height: 10px;
+      width: 10px;
+      text-indent: -999em;
+      overflow: hidden;
       top: 15px;
 
       &--next {
+        border-left-color: $gray;
+
         &:focus {
-          border-left-color: $primary;
+          border-left-color: darken($gray, 30%);
           outline:none;
         }
       }
 
       &--previous {
+        border-right-color: $gray;
+
         &:focus {
-          border-right-color: $primary;
+          border-right-color: darken($gray, 30%);
           outline:none;
         }
       }
@@ -117,7 +132,7 @@ $cal-icon-width: 24px;
 
       &--selected {
         &:focus {
-          background-color: $black;
+          background-color: $primary;
         }
       }
 
@@ -125,8 +140,7 @@ $cal-icon-width: 24px;
         color: white;
 
         &:focus {
-          background-color: $gray;
-          color: white;
+          background-color: $light-gray;
           box-shadow: inset 0px 0px 0px 1px $primary, 0px 0px 0px 1px $primary;
         }
       }
@@ -137,16 +151,19 @@ $cal-icon-width: 24px;
     z-index: 10;
   }
 
-  .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected {
-    background: $gray;
-    box-shadow: inset 0px 0px 0px 1px $primary, 0px 0px 0px 1px $primary;
-    color: white;
+  .react-datepicker__day--keyboard-selected,
+  .react-datepicker__month-text--keyboard-selected,
+  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
+    background: $primary;
+    color: $black;
+    font-weight: normal;
     border-radius: 0;
   }
 
   .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
   .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range {
-    background-color: $black;
+    background: $primary;
+    color: $black;
     border-radius: 0;
   }
 
@@ -159,23 +176,6 @@ $cal-icon-width: 24px;
     width: 120px;
   }
 
-  .react-datepicker__navigation {
-    background: none;
-    line-height: 1.7rem;
-    text-align: center;
-    cursor: pointer;
-    position: absolute;
-    top: 10px;
-    width: 0;
-    padding: 0;
-    border: 0.45rem solid transparent;
-    z-index: 1;
-    height: 10px;
-    width: 10px;
-    text-indent: -999em;
-    overflow: hidden;
-  }
-
   .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
     right: 130px;
   }

src/client/components/graphics/Calendar/index.js

@@ -1,31 +1,40 @@
 import React from 'react';
 
+import './index.scss';
+
 const Calendar = () => {
   return (
     <svg
       className="icon calendar"
-      width="48px"
-      height="44px"
-      viewBox="0 0 48 44"
-      version="1.1"
       xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 94.5 93.5"
     >
-      <g
-        stroke="none"
-        strokeWidth="1"
-        fill="none"
-        fillRule="evenodd"
-      >
-        <g
-          fill="#000000"
-          fillRule="nonzero"
-        >
-          <path
-            d="M36,3 L36,0 L34,0 L34,3 L14,3 L14,0 L12,0 L12,3 L0,3 L0,44 L48,44 L48,3 L36,3 Z M46,42 L2,42 L2,13 L46,13 L46,42 Z M46,11 L2,11 L2,5 L12,5 L12,8 L14,8 L14,5 L34,5 L34,8 L36,8 L36,5 L46,5 L46,11 Z"
-            id="Shape"
-          />
-        </g>
-      </g>
+      <line
+        className="stroke"
+        x1="0.25"
+        y1="36.94"
+        x2="94.25"
+        y2="36.94"
+      />
+      <line
+        className="stroke"
+        x1="24.6"
+        y1="22.34"
+        x2="24.6"
+      />
+      <line
+        className="stroke"
+        x1="69.9"
+        y1="22.34"
+        x2="69.9"
+      />
+      <rect
+        className="stroke"
+        x="0.5"
+        y="11.56"
+        width="93.5"
+        height="81.44"
+      />
     </svg>
   );
 };

src/client/components/graphics/Calendar/index.scss

@@ -0,0 +1,8 @@
+.calendar {
+  overflow: visible;
+
+  rect {
+    fill: none;
+  }
+}
+

src/client/config/getWebpackDevConfig.js

@@ -82,7 +82,7 @@ module.exports = (config) => {
             // Chains the sass-loader with the css-loader and the style-loader
             // to immediately apply all styles to the DOM.
             {
-              test: /\.(scss|sass)$/,
+              test: /\.(scss|sass|css)$/,
               use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
             },
             // "file" loader makes sure those assets get served by WebpackDevServer.

src/client/scss/app.scss

@@ -96,8 +96,7 @@ a {
 .icon {
   @include color-svg($black);
 
-
-  path, line, polyline {
+  path, line, polyline, rect {
     vector-effect: non-scaling-stroke;
     shape-rendering:crispEdges;
     fill: none;