box-ui-elements 15.0.0-beta.7 → 15.0.0

package/es/components/date-picker/DatePicker.js

@@ -1,11 +1,11 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -27,15 +27,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import Pikaday from 'pikaday';
 import noop from 'lodash/noop';
 import range from 'lodash/range';
 import uniqueId from 'lodash/uniqueId'; // @ts-ignore flow import
 
 import { RESIN_TAG_TARGET } from '../../common/variables';
-import IconAlert from '../../icons/general/IconAlert';
-import IconCalendar from '../../icons/general/IconCalendar';
-import IconClear from '../../icons/general/IconClear';
+import Alert16 from '../../icon/fill/Alert16';
+import Calendar16 from '../../icon/fill/Calendar16';
+import ClearBadge16 from '../../icon/fill/ClearBadge16';
+import AccessiblePikaday from './AccessiblePikaday';
 import { ButtonType } from '../button';
 import Label from '../label';
 import PlainButton from '../plain-button';
@@ -63,12 +63,25 @@ var messages = defineMessages({
   chooseDate: {
     "id": "boxui.datePicker.chooseDate",
     "defaultMessage": "Choose Date"
+  },
+  dateInputRangeError: {
+    "id": "boxui.datePicker.dateInputRangeError",
+    "defaultMessage": "Please enter a date between {minLocaleDate} and {maxLocaleDate}"
+  },
+  dateInputMaxError: {
+    "id": "boxui.datePicker.dateInputMaxError",
+    "defaultMessage": "Please enter a date before {maxLocaleDate}"
+  },
+  dateInputMinError: {
+    "id": "boxui.datePicker.dateInputMinError",
+    "defaultMessage": "Please enter a date after {minLocaleDate}"
   }
 });
 var TOGGLE_DELAY_MS = 300;
 var ENTER_KEY = 'Enter';
 var ESCAPE_KEY = 'Escape';
 var TAB_KEY = 'Tab';
+var ISO_DATE_FORMAT_PATTERN = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
 export var DateFormat;
 /**
  * Converts date from being relative to GMT, to being relative to browser
@@ -80,6 +93,7 @@ export var DateFormat;
 
 (function (DateFormat) {
   DateFormat["ISO_STRING_DATE_FORMAT"] = "isoString";
+  DateFormat["LOCALE_DATE_STRING_DATE_FORMAT"] = "localeDateString";
   DateFormat["UTC_TIME_DATE_FORMAT"] = "utcTime";
   DateFormat["UNIX_TIME_DATE_FORMAT"] = "unixTime";
   DateFormat["UTC_ISO_STRING_DATE_FORMAT"] = "utcISOString";
@@ -103,6 +117,9 @@ function getFormattedDate(date, format) {
     case DateFormat.ISO_STRING_DATE_FORMAT:
       return date.toISOString();
 
+    case DateFormat.LOCALE_DATE_STRING_DATE_FORMAT:
+      return date.toLocaleDateString();
+
     case DateFormat.UTC_TIME_DATE_FORMAT:
       return convertDateToUnixMidnightTime(date);
 
@@ -135,47 +152,116 @@ function (_React$Component) {
 
     _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DatePicker)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isDateInputInvalid: false,
+      showDateInputError: false
+    });
+
     _defineProperty(_assertThisInitialized(_this), "errorMessageID", uniqueId('errorMessage'));
 
     _defineProperty(_assertThisInitialized(_this), "descriptionID", uniqueId('description'));
 
     _defineProperty(_assertThisInitialized(_this), "onSelectHandler", function () {
       var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      var onChange = _this.props.onChange;
+      var _this$props = _this.props,
+          onChange = _this$props.onChange,
+          isAccessible = _this$props.isAccessible;
+      var isDateInputInvalid = _this.state.isDateInputInvalid;
 
       if (onChange) {
         var formattedDate = _this.formatValue(date);
 
         onChange(date, formattedDate);
       }
+
+      if (isAccessible) {
+        if (_this.dateInputEl && _this.datePicker) {
+          // Required because Pikaday instance is unbound
+          // See https://github.com/Pikaday/Pikaday#usage
+          _this.dateInputEl.value = _this.datePicker.toString();
+        }
+
+        if (_this.datePicker && _this.datePicker.isVisible()) {
+          _this.datePicker.hide();
+
+          _this.focusDatePicker();
+        }
+      }
+
+      if (isDateInputInvalid) {
+        _this.setState({
+          isDateInputInvalid: false,
+          showDateInputError: false
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "datePicker", null);
 
+    _defineProperty(_assertThisInitialized(_this), "canUseDateInputType", true);
+
     _defineProperty(_assertThisInitialized(_this), "shouldStayClosed", false);
 
     _defineProperty(_assertThisInitialized(_this), "focusDatePicker", function () {
-      // By default, this will open the datepicker too
+      // This also opens the date picker when isAccessible is disabled
       if (_this.dateInputEl) {
         _this.dateInputEl.focus();
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getDateInputError", function () {
+      var _this$props2 = _this.props,
+          intl = _this$props2.intl,
+          _this$props2$maxDate = _this$props2.maxDate,
+          maxDate = _this$props2$maxDate === void 0 ? null : _this$props2$maxDate,
+          _this$props2$minDate = _this$props2.minDate,
+          minDate = _this$props2$minDate === void 0 ? null : _this$props2$minDate;
+      var showDateInputError = _this.state.showDateInputError;
+      var formatMessage = intl.formatMessage;
+      if (!showDateInputError) return '';
+      var dateInputError = '';
+      var maxLocaleDate = getFormattedDate(maxDate, DateFormat.LOCALE_DATE_STRING_DATE_FORMAT);
+      var minLocaleDate = getFormattedDate(minDate, DateFormat.LOCALE_DATE_STRING_DATE_FORMAT);
+
+      if (maxLocaleDate && minLocaleDate) {
+        dateInputError = formatMessage(messages.dateInputRangeError, {
+          maxLocaleDate: maxLocaleDate,
+          minLocaleDate: minLocaleDate
+        });
+      } else if (maxLocaleDate) {
+        dateInputError = formatMessage(messages.dateInputMaxError, {
+          maxLocaleDate: maxLocaleDate
+        });
+      } else if (minLocaleDate) {
+        dateInputError = formatMessage(messages.dateInputMinError, {
+          minLocaleDate: minLocaleDate
+        });
+      }
+
+      return dateInputError;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleInputKeyDown", function (event) {
-      var _this$props = _this.props,
-          isKeyboardInputAllowed = _this$props.isKeyboardInputAllowed,
-          isTextInputAllowed = _this$props.isTextInputAllowed;
+      var _this$props3 = _this.props,
+          isKeyboardInputAllowed = _this$props3.isKeyboardInputAllowed,
+          isTextInputAllowed = _this$props3.isTextInputAllowed,
+          isAccessible = _this$props3.isAccessible;
 
       if (!isKeyboardInputAllowed && _this.datePicker && _this.datePicker.isVisible()) {
         event.stopPropagation();
       } // Stops up/down arrow & spacebar from moving page scroll position since pikaday does not preventDefault correctly
 
 
-      if (!isTextInputAllowed && event.key !== TAB_KEY) {
+      if (!(isTextInputAllowed || isAccessible) && event.key !== TAB_KEY) {
         event.preventDefault();
       }
 
-      if (isTextInputAllowed && event.key === ENTER_KEY) {
+      if ((isTextInputAllowed || isAccessible && !_this.canUseDateInputType) && event.key === ENTER_KEY) {
+        event.preventDefault();
+      } // Stops enter & spacebar from opening up the browser's default date picker
+
+
+      if (isAccessible && (event.key === ENTER_KEY || event.key === ' ')) {
         event.preventDefault();
       }
 
@@ -187,10 +273,73 @@ function (_React$Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (event) {
+      var _this$props4 = _this.props,
+          isAccessible = _this$props4.isAccessible,
+          maxDate = _this$props4.maxDate,
+          minDate = _this$props4.minDate,
+          onChange = _this$props4.onChange;
+      var isDateInputInvalid = _this.state.isDateInputInvalid;
+
+      if (!isAccessible || !_this.canUseDateInputType) {
+        return;
+      }
+
+      if (_this.datePicker && _this.datePicker.isVisible()) {
+        event.stopPropagation();
+      }
+
+      var value = event.target.value;
+
+      if (_this.datePicker && value) {
+        var parsedDate = _this.parseDisplayDateType(value);
+
+        if (parsedDate) {
+          if (minDate && parsedDate < minDate || maxDate && parsedDate > maxDate) {
+            _this.datePicker.setDate(null);
+
+            _this.setState({
+              isDateInputInvalid: true
+            });
+
+            return;
+          } // Reset the error styling on valid date input
+
+
+          if (isDateInputInvalid) {
+            _this.setState({
+              isDateInputInvalid: false,
+              showDateInputError: false
+            });
+          }
+        } else {
+          _this.setState({
+            isDateInputInvalid: true
+          });
+        } // Set date so Pikaday date picker value stays in sync with input
+
+
+        _this.datePicker.setDate(parsedDate, true);
+
+        if (onChange) {
+          var formattedDate = _this.formatValue(parsedDate);
+
+          onChange(parsedDate, formattedDate);
+        }
+      } else if (isDateInputInvalid) {
+        _this.setState({
+          isDateInputInvalid: false,
+          showDateInputError: false
+        });
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleInputBlur", function (event) {
-      var _this$props2 = _this.props,
-          onBlur = _this$props2.onBlur,
-          isTextInputAllowed = _this$props2.isTextInputAllowed;
+      var _this$props5 = _this.props,
+          isAccessible = _this$props5.isAccessible,
+          isTextInputAllowed = _this$props5.isTextInputAllowed,
+          onBlur = _this$props5.onBlur;
+      var isDateInputInvalid = _this.state.isDateInputInvalid;
       var nextActiveElement = event.relatedTarget || document.activeElement; // This is mostly here to cancel out the pikaday hide() on blur
 
       if (_this.datePicker && _this.datePicker.isVisible() && nextActiveElement && nextActiveElement === _this.datePickerButtonEl) {
@@ -202,50 +351,155 @@ function (_React$Component) {
 
       if (onBlur) {
         onBlur(event);
-      } // Since we Fire parent onChange event if isTextInputAllowed
+      } // Since we fire parent onChange event if isTextInputAllowed,
       // fire it on blur if the user typed a correct date format
 
 
       var inputDate = null;
 
       if (_this.dateInputEl) {
-        inputDate = new Date(_this.dateInputEl.value);
+        var dateInputElVal = null;
+
+        if (isAccessible && !_this.canUseDateInputType) {
+          dateInputElVal = _this.parseDisplayDateType(_this.dateInputEl.value);
+        }
+
+        inputDate = new Date(dateInputElVal || _this.dateInputEl.value);
       }
 
-      if (isTextInputAllowed && inputDate && inputDate.getDate()) {
+      if ((isTextInputAllowed || isAccessible && !_this.canUseDateInputType) && inputDate && inputDate.getDate()) {
         _this.onSelectHandler(inputDate);
       }
+
+      if (isAccessible && isDateInputInvalid) _this.setState({
+        showDateInputError: true
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleButtonClick", function (event) {
       event.preventDefault();
       event.stopPropagation();
+      var _this$props6 = _this.props,
+          isAccessible = _this$props6.isAccessible,
+          isDisabled = _this$props6.isDisabled;
+
+      if (isAccessible) {
+        if (isDisabled || !_this.datePicker) {
+          return;
+        }
+
+        if (_this.datePicker.isVisible()) {
+          _this.datePicker.hide();
+
+          _this.focusDatePicker();
+        } else {
+          _this.datePicker.show();
+        }
+
+        return;
+      }
 
       if (!_this.shouldStayClosed) {
         _this.focusDatePicker();
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleOnClick", function (event) {
+      var isAccessible = _this.props.isAccessible;
+
+      if (isAccessible) {
+        // Suppress Firefox default behavior: clicking on input type "date"
+        // opens the browser date picker.
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "formatDisplay", function (date) {
-      var _this$props3 = _this.props,
-          displayFormat = _this$props3.displayFormat,
-          intl = _this$props3.intl;
+      var _this$props7 = _this.props,
+          displayFormat = _this$props7.displayFormat,
+          intl = _this$props7.intl;
       return date ? intl.formatDate(date, displayFormat) : '';
     });
 
+    _defineProperty(_assertThisInitialized(_this), "formatDisplayDateType", function (date) {
+      // Input type "date" only accepts the format YYYY-MM-DD
+      return date ? getFormattedDate(date, DateFormat.UTC_ISO_STRING_DATE_FORMAT).slice(0, 10) : '';
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "parseDisplayDateType", function (dateString) {
+      if (dateString && ISO_DATE_FORMAT_PATTERN.test(dateString)) {
+        // Calling new Date('YYYY-MM-DD') without 'T00:00:00' yields undesired results:
+        // E.g. new Date('2017-06-01') => May 31 2017
+        // E.g. new Date('2017-06-01T00:00:00') => June 01 2017
+        // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#parameters
+        return new Date("".concat(dateString, "T00:00:00"));
+      }
+
+      return null;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "formatValue", function (date) {
       var dateFormat = _this.props.dateFormat;
       return dateFormat ? getFormattedDate(date, dateFormat) : '';
     });
 
     _defineProperty(_assertThisInitialized(_this), "clearDate", function (event) {
-      event.preventDefault(); // so datepicker doesn't open after clearing
+      // Prevents the date picker from opening after clearing
+      event.preventDefault();
+      var isAccessible = _this.props.isAccessible;
 
       if (_this.datePicker) {
         _this.datePicker.setDate(null);
       }
 
       _this.onSelectHandler(null);
+
+      if (isAccessible) {
+        _this.focusDatePicker();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "shouldUseAccessibleFallback", function () {
+      var test = document.createElement('input');
+
+      try {
+        test.type = 'date';
+      } catch (e) {} // no-op
+      // If date input falls back to text input, show the fallback
+
+
+      return test.type === 'text';
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderCalendarButton", function () {
+      var _this$props8 = _this.props,
+          intl = _this$props8.intl,
+          isAccessible = _this$props8.isAccessible,
+          isAlwaysVisible = _this$props8.isAlwaysVisible,
+          isDisabled = _this$props8.isDisabled;
+      var formatMessage = intl.formatMessage;
+
+      if (isAlwaysVisible) {
+        return null;
+      } // De-emphasizing the Pikaday date picker because it does not meet accessibility standards
+      // Screenreaders & navigating via keyboard will no longer pick up on this element
+
+
+      var accessibleAttrs = isAccessible ? {
+        'aria-hidden': true,
+        tabIndex: -1
+      } : {};
+      return React.createElement(PlainButton, _extends({
+        "aria-label": formatMessage(messages.chooseDate),
+        className: "date-picker-open-btn",
+        getDOMRef: function getDOMRef(ref) {
+          _this.datePickerButtonEl = ref;
+        },
+        isDisabled: isDisabled,
+        onClick: _this.handleButtonClick,
+        type: ButtonType.BUTTON
+      }, accessibleAttrs), React.createElement(Calendar16, null));
     });
 
     return _this;
@@ -254,52 +508,72 @@ function (_React$Component) {
   _createClass(DatePicker, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props4 = this.props,
-          customInput = _this$props4.customInput,
-          dateFormat = _this$props4.dateFormat,
-          intl = _this$props4.intl,
-          isAlwaysVisible = _this$props4.isAlwaysVisible,
-          isTextInputAllowed = _this$props4.isTextInputAllowed,
-          maxDate = _this$props4.maxDate,
-          minDate = _this$props4.minDate,
-          value = _this$props4.value,
-          yearRange = _this$props4.yearRange;
+      var _this$props9 = this.props,
+          customInput = _this$props9.customInput,
+          dateFormat = _this$props9.dateFormat,
+          displayFormat = _this$props9.displayFormat,
+          intl = _this$props9.intl,
+          isAccessible = _this$props9.isAccessible,
+          isAlwaysVisible = _this$props9.isAlwaysVisible,
+          isTextInputAllowed = _this$props9.isTextInputAllowed,
+          maxDate = _this$props9.maxDate,
+          minDate = _this$props9.minDate,
+          onChange = _this$props9.onChange,
+          value = _this$props9.value,
+          yearRange = _this$props9.yearRange;
       var formatDate = intl.formatDate,
           formatMessage = intl.formatMessage;
       var nextMonth = messages.nextMonth,
           previousMonth = messages.previousMonth;
-      var defaultValue = value; // When date format is utcTime, initial date needs to be converted from being relative to GMT to being
+      var defaultValue = value;
+
+      if (isAccessible && this.shouldUseAccessibleFallback()) {
+        this.canUseDateInputType = false;
+      } // When date format is utcTime, initial date needs to be converted from being relative to GMT to being
       // relative to browser timezone
 
+
       if (dateFormat === DateFormat.UTC_TIME_DATE_FORMAT && value) {
         defaultValue = convertUTCToLocal(value);
+
+        if (onChange) {
+          var formattedDate = this.formatValue(defaultValue);
+          onChange(defaultValue, formattedDate);
+        }
       } // Make sure the DST detection algorithm in browsers is up-to-date
 
 
       var year = new Date().getFullYear();
+
+      var _ref = displayFormat || {},
+          timeZone = _ref.timeZone;
+
       var i18n = {
         previousMonth: formatMessage(previousMonth),
         nextMonth: formatMessage(nextMonth),
         months: range(12).map(function (month) {
           return formatDate(new Date(year, month, 15), {
-            month: 'long'
+            month: 'long',
+            timeZone: timeZone
           });
         }),
         // weekdays must start with Sunday, so array of dates below is May 1st-8th, 2016
         weekdays: range(1, 8).map(function (date) {
           return formatDate(new Date(2016, 4, date), {
-            weekday: 'long'
+            weekday: 'long',
+            timeZone: timeZone
           });
         }),
         weekdaysShort: range(1, 8).map(function (date) {
           return formatDate(new Date(2016, 4, date), {
-            weekday: 'narrow'
+            weekday: 'narrow',
+            timeZone: timeZone
           });
         })
       }; // If "bound" is true (default), the DatePicker will be appended at the end of the document, with absolute positioning
       // If "bound" is false, the DatePicker will be appended to the DOM right after the input, with relative positioning
 
-      this.datePicker = new Pikaday({
+      var datePickerConfig = {
         bound: !customInput,
         blurFieldOnSelect: false,
         // Available in pikaday > 1.5.1
@@ -315,7 +589,22 @@ function (_React$Component) {
         onSelect: this.onSelectHandler,
         yearRange: yearRange,
         toString: this.formatDisplay
-      });
+      };
+
+      if (isAccessible) {
+        if (this.canUseDateInputType) {
+          delete datePickerConfig.field;
+          datePickerConfig.trigger = this.dateInputEl;
+          datePickerConfig.accessibleFieldEl = this.dateInputEl;
+          datePickerConfig.datePickerButtonEl = this.datePickerButtonEl;
+        }
+
+        datePickerConfig.parse = this.parseDisplayDateType;
+        datePickerConfig.toString = this.formatDisplayDateType;
+        datePickerConfig.keyboardInput = false;
+      }
+
+      this.datePicker = new AccessiblePikaday(datePickerConfig);
 
       if (isTextInputAllowed) {
         this.updateDateInputValue(this.formatDisplay(defaultValue));
@@ -337,11 +626,11 @@ function (_React$Component) {
           nextMinDate = _nextProps$minDate === void 0 ? null : _nextProps$minDate,
           _nextProps$maxDate = nextProps.maxDate,
           nextMaxDate = _nextProps$maxDate === void 0 ? null : _nextProps$maxDate;
-      var _this$props5 = this.props,
-          value = _this$props5.value,
-          minDate = _this$props5.minDate,
-          maxDate = _this$props5.maxDate,
-          isTextInputAllowed = _this$props5.isTextInputAllowed;
+      var _this$props10 = this.props,
+          value = _this$props10.value,
+          minDate = _this$props10.minDate,
+          maxDate = _this$props10.maxDate,
+          isTextInputAllowed = _this$props10.isTextInputAllowed;
       var selectedDate = this.datePicker && this.datePicker.getDate(); // only set date when props change
 
       if (nextValue && !value || !nextValue && value || nextValue && value && nextValue.getTime() !== value.getTime()) {
@@ -389,33 +678,38 @@ function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props6 = this.props,
-          className = _this$props6.className,
-          customInput = _this$props6.customInput,
-          description = _this$props6.description,
-          error = _this$props6.error,
-          errorTooltipPosition = _this$props6.errorTooltipPosition,
-          hideLabel = _this$props6.hideLabel,
-          hideOptionalLabel = _this$props6.hideOptionalLabel,
-          inputProps = _this$props6.inputProps,
-          intl = _this$props6.intl,
-          isAlwaysVisible = _this$props6.isAlwaysVisible,
-          isClearable = _this$props6.isClearable,
-          isDisabled = _this$props6.isDisabled,
-          isRequired = _this$props6.isRequired,
-          isTextInputAllowed = _this$props6.isTextInputAllowed,
-          label = _this$props6.label,
-          name = _this$props6.name,
-          onFocus = _this$props6.onFocus,
-          placeholder = _this$props6.placeholder,
-          resinTarget = _this$props6.resinTarget,
-          value = _this$props6.value;
+      var _this$props11 = this.props,
+          className = _this$props11.className,
+          customInput = _this$props11.customInput,
+          description = _this$props11.description,
+          error = _this$props11.error,
+          errorTooltipPosition = _this$props11.errorTooltipPosition,
+          hideLabel = _this$props11.hideLabel,
+          hideOptionalLabel = _this$props11.hideOptionalLabel,
+          inputProps = _this$props11.inputProps,
+          intl = _this$props11.intl,
+          isAccessible = _this$props11.isAccessible,
+          isClearable = _this$props11.isClearable,
+          isDisabled = _this$props11.isDisabled,
+          isRequired = _this$props11.isRequired,
+          isTextInputAllowed = _this$props11.isTextInputAllowed,
+          label = _this$props11.label,
+          maxDate = _this$props11.maxDate,
+          minDate = _this$props11.minDate,
+          name = _this$props11.name,
+          onFocus = _this$props11.onFocus,
+          placeholder = _this$props11.placeholder,
+          resinTarget = _this$props11.resinTarget,
+          value = _this$props11.value;
+      var isDateInputInvalid = this.state.isDateInputInvalid;
       var formatMessage = intl.formatMessage;
+      var errorMessage = error || this.getDateInputError();
+      var hasError = !!errorMessage || isDateInputInvalid;
+      var hasValue = !!value || isDateInputInvalid;
       var classes = classNames(className, 'date-picker-wrapper', {
-        'show-clear-btn': !!value,
-        'show-error': !!error
+        'show-clear-btn': isClearable && hasValue && !isDisabled,
+        'show-error': hasError
       });
-      var hasError = !!error;
       var ariaAttrs = {
         'aria-invalid': hasError,
         'aria-required': isRequired,
@@ -423,15 +717,57 @@ function (_React$Component) {
         'aria-describedby': description ? this.descriptionID : undefined
       };
       var resinTargetAttr = resinTarget ? _defineProperty({}, RESIN_TAG_TARGET, resinTarget) : {};
-      var valueAttr = isTextInputAllowed ? {
-        defaultValue: this.formatDisplay(value)
-      } : {
-        value: this.formatDisplay(value)
-      };
-      var onChangeAttr = isTextInputAllowed ? {} : {
-        onChange: noop
-      };
-      /* fixes proptype error about readonly field (not adding readonly so constraint validation works) */
+      var valueAttr;
+
+      if (isAccessible) {
+        valueAttr = {
+          defaultValue: this.formatDisplayDateType(value)
+        };
+      } else if (isTextInputAllowed) {
+        valueAttr = {
+          defaultValue: this.formatDisplay(value)
+        };
+      } else {
+        valueAttr = {
+          value: this.formatDisplay(value)
+        };
+      }
+
+      var onChangeAttr;
+
+      if (isAccessible && this.canUseDateInputType) {
+        onChangeAttr = {
+          onChange: this.handleOnChange
+        };
+      } else if (isTextInputAllowed || isAccessible && !this.canUseDateInputType) {
+        onChangeAttr = {};
+      } else {
+        // Fixes prop type error about read-only field
+        // Not adding readOnly so constraint validation works
+        onChangeAttr = {
+          onChange: noop
+        };
+      }
+
+      var additionalAttrs;
+
+      if (isAccessible && this.canUseDateInputType) {
+        additionalAttrs = {
+          max: this.formatDisplayDateType(maxDate) || '9999-12-31',
+          min: this.formatDisplayDateType(minDate) || '0001-01-01'
+        };
+      } else if (isAccessible && !this.canUseDateInputType) {
+        // "name" prop is required for pattern validation to be surfaced on form submit. See components/form-elements/form/Form.js
+        // "title" prop is shown during constraint validation as a description of the pattern
+        // See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern#usability
+        additionalAttrs = {
+          name: name,
+          pattern: ISO_DATE_FORMAT_PATTERN.source,
+          title: 'YYYY-MM-DD'
+        };
+      } else {
+        additionalAttrs = {};
+      }
 
       return React.createElement("div", {
         className: classes
@@ -446,59 +782,43 @@ function (_React$Component) {
         className: "date-picker-description"
       }, description), React.createElement(Tooltip, {
         className: "date-picker-error-tooltip",
-        isShown: !!error,
+        isShown: !!errorMessage,
         position: errorTooltipPosition,
-        text: error || '',
+        text: errorMessage || '',
         theme: TooltipTheme.ERROR
       }, customInput ? React.cloneElement(customInput, _objectSpread({
         disabled: isDisabled,
-        ref: function ref(_ref2) {
-          _this2.dateInputEl = _ref2;
+        ref: function ref(_ref3) {
+          _this2.dateInputEl = _ref3;
         },
         required: isRequired
       }, resinTargetAttr, {}, ariaAttrs)) : React.createElement("input", _extends({
-        ref: function ref(_ref3) {
-          _this2.dateInputEl = _ref3;
+        ref: function ref(_ref4) {
+          _this2.dateInputEl = _ref4;
         },
         className: "date-picker-input",
         disabled: isDisabled,
         onBlur: this.handleInputBlur,
+        onClick: this.handleOnClick,
         placeholder: placeholder || formatMessage(messages.chooseDate),
         required: isRequired,
-        type: "text"
+        type: isAccessible && this.canUseDateInputType ? 'date' : 'text'
       }, onChangeAttr, {
         onFocus: onFocus,
         onKeyDown: this.handleInputKeyDown
-      }, resinTargetAttr, ariaAttrs, inputProps, valueAttr))), React.createElement("span", {
+      }, resinTargetAttr, ariaAttrs, inputProps, valueAttr, additionalAttrs))), React.createElement("span", {
         id: this.errorMessageID,
         className: "accessibility-hidden",
         role: "alert"
-      }, error))), isClearable && !!value && !isDisabled ? React.createElement(PlainButton, {
+      }, errorMessage))), isClearable && hasValue && !isDisabled ? React.createElement(PlainButton, {
         "aria-label": formatMessage(messages.dateClearButton),
         className: "date-picker-clear-btn",
         onClick: this.clearDate,
         type: ButtonType.BUTTON
-      }, React.createElement(IconClear, {
-        height: 12,
-        width: 12
-      })) : null, error ? React.createElement(IconAlert, {
+      }, React.createElement(ClearBadge16, null)) : null, hasError ? React.createElement(Alert16, {
         className: "date-picker-icon-alert",
-        height: 13,
-        title: React.createElement(FormattedMessage, messages.iconAlertText),
-        width: 13
-      }) : null, !isAlwaysVisible && React.createElement(PlainButton, {
-        "aria-label": formatMessage(messages.chooseDate),
-        className: "date-picker-open-btn",
-        getDOMRef: function getDOMRef(ref) {
-          _this2.datePickerButtonEl = ref;
-        },
-        isDisabled: isDisabled,
-        onClick: this.handleButtonClick,
-        type: ButtonType.BUTTON
-      }, React.createElement(IconCalendar, {
-        height: 17,
-        width: 16
-      })), React.createElement("input", {
+        title: React.createElement(FormattedMessage, messages.iconAlertText)
+      }) : null, this.renderCalendarButton(), React.createElement("input", {
         className: "date-picker-unix-time-input",
         name: name,
         readOnly: true,