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

package/src/components/date-picker/DatePicker.tsx

@@ -2,17 +2,17 @@ import * as React from 'react';
 import { defineMessages, injectIntl, FormattedMessage, WrappedComponentProps } 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, { AccessiblePikadayOptions } from './AccessiblePikaday';
 import { ButtonType } from '../button';
 import Label from '../label';
 import PlainButton from '../plain-button';
@@ -49,6 +49,21 @@ const messages = defineMessages({
         description: 'Button for opening date picker',
         id: 'boxui.datePicker.chooseDate',
     },
+    dateInputRangeError: {
+        defaultMessage: 'Please enter a date between {minLocaleDate} and {maxLocaleDate}',
+        description: 'Error message when date is out of the minimum and maximum range',
+        id: 'boxui.datePicker.dateInputRangeError',
+    },
+    dateInputMaxError: {
+        defaultMessage: 'Please enter a date before {maxLocaleDate}',
+        description: 'Error message when date is later than the maximum date',
+        id: 'boxui.datePicker.dateInputMaxError',
+    },
+    dateInputMinError: {
+        defaultMessage: 'Please enter a date after {minLocaleDate}',
+        description: 'Error message when date is earlier than the minimum date',
+        id: 'boxui.datePicker.dateInputMinError',
+    },
 });
 
 const TOGGLE_DELAY_MS = 300;
@@ -56,8 +71,11 @@ const ENTER_KEY = 'Enter';
 const ESCAPE_KEY = 'Escape';
 const TAB_KEY = 'Tab';
 
+const ISO_DATE_FORMAT_PATTERN = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
+
 export enum DateFormat {
     ISO_STRING_DATE_FORMAT = 'isoString',
+    LOCALE_DATE_STRING_DATE_FORMAT = 'localeDateString',
     UTC_TIME_DATE_FORMAT = 'utcTime',
     UNIX_TIME_DATE_FORMAT = 'unixTime',
     UTC_ISO_STRING_DATE_FORMAT = 'utcISOString',
@@ -87,6 +105,8 @@ function getFormattedDate(date: Date | null, format: DateFormat) {
     switch (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);
         case DateFormat.UTC_ISO_STRING_DATE_FORMAT:
@@ -108,8 +128,13 @@ export interface DatePickerProps extends WrappedComponentProps {
     dateFormat?: DateFormat;
     /** Some optional description */
     description?: React.ReactNode;
-    /** The format of the date displayed in the input field */
-    displayFormat?: Object;
+    /**
+     * The format of the date displayed in the input field
+     * @deprecated, will no longer be supported with accessible mode enabled (isAccessible = true)
+     */
+    displayFormat?: {
+        [key: string]: string;
+    };
     /** Error message */
     error?: React.ReactNode;
     /** Position of error message tooltip */
@@ -120,6 +145,8 @@ export interface DatePickerProps extends WrappedComponentProps {
     hideOptionalLabel?: boolean;
     /** Props that will be applied on the input element */
     inputProps?: Object;
+    /** Does the date input meet accessibility standards */
+    isAccessible?: boolean;
     /** Is the calendar always visible */
     isAlwaysVisible?: boolean;
     /** Is input clearable */
@@ -156,7 +183,14 @@ export interface DatePickerProps extends WrappedComponentProps {
     yearRange?: number | Array<number>;
 }
 
-class DatePicker extends React.Component<DatePickerProps> {
+interface DatePickerState {
+    /** Is the date input invalid */
+    isDateInputInvalid: boolean;
+    /** Shows error message tooltip for invalid date input */
+    showDateInputError: boolean;
+}
+
+class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
     static defaultProps = {
         className: '',
         dateFormat: DateFormat.UNIX_TIME_DATE_FORMAT,
@@ -170,6 +204,11 @@ class DatePicker extends React.Component<DatePickerProps> {
         yearRange: 10,
     };
 
+    state = {
+        isDateInputInvalid: false,
+        showDateInputError: false,
+    };
+
     errorMessageID = uniqueId('errorMessage');
 
     descriptionID = uniqueId('description');
@@ -178,37 +217,65 @@ class DatePicker extends React.Component<DatePickerProps> {
         const {
             customInput,
             dateFormat,
+            displayFormat,
             intl,
+            isAccessible,
             isAlwaysVisible,
             isTextInputAllowed,
             maxDate,
             minDate,
+            onChange,
             value,
             yearRange,
         } = this.props;
         const { formatDate, formatMessage } = intl;
         const { nextMonth, previousMonth } = messages;
         let 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) {
+                const formattedDate = this.formatValue(defaultValue);
+                onChange(defaultValue, formattedDate);
+            }
         }
         // Make sure the DST detection algorithm in browsers is up-to-date
         const year = new Date().getFullYear();
-
+        const { timeZone } = displayFormat || {};
         const i18n = {
             previousMonth: formatMessage(previousMonth),
             nextMonth: formatMessage(nextMonth),
-            months: range(12).map(month => formatDate(new Date(year, month, 15), { month: 'long' })),
+            months: range(12).map(month =>
+                formatDate(new Date(year, month, 15), {
+                    month: 'long',
+                    timeZone,
+                }),
+            ),
             // weekdays must start with Sunday, so array of dates below is May 1st-8th, 2016
-            weekdays: range(1, 8).map(date => formatDate(new Date(2016, 4, date), { weekday: 'long' })),
-            weekdaysShort: range(1, 8).map(date => formatDate(new Date(2016, 4, date), { weekday: 'narrow' })),
+            weekdays: range(1, 8).map(date =>
+                formatDate(new Date(2016, 4, date), {
+                    weekday: 'long',
+                    timeZone,
+                }),
+            ),
+            weekdaysShort: range(1, 8).map(date =>
+                formatDate(new Date(2016, 4, date), {
+                    weekday: 'narrow',
+                    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({
+        const datePickerConfig: AccessiblePikadayOptions = {
             bound: !customInput,
             blurFieldOnSelect: false, // Available in pikaday > 1.5.1
             setDefaultDate: true,
@@ -223,7 +290,22 @@ class DatePicker extends React.Component<DatePickerProps> {
             onSelect: this.onSelectHandler,
             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));
@@ -287,11 +369,29 @@ class DatePicker extends React.Component<DatePickerProps> {
     }
 
     onSelectHandler = (date: Date | null = null) => {
-        const { onChange } = this.props;
+        const { onChange, isAccessible } = this.props;
+        const { isDateInputInvalid } = this.state;
+
         if (onChange) {
             const 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 });
+        }
     };
 
     updateDateInputValue(value: string) {
@@ -304,31 +404,61 @@ class DatePicker extends React.Component<DatePickerProps> {
 
     datePicker: Pikaday | null = null;
 
-    datePickerButtonEl: HTMLButtonElement | null | undefined;
+    datePickerButtonEl: HTMLButtonElement | HTMLDivElement | null | undefined;
+
+    // Used to detect when a fallback is necessary when isAccessible is enabled
+    canUseDateInputType = true;
 
     // Used to prevent bad sequences of hide/show when toggling the datepicker button
     shouldStayClosed = false;
 
     focusDatePicker = () => {
-        // By default, this will open the datepicker too
+        // This also opens the date picker when isAccessible is disabled
         if (this.dateInputEl) {
             this.dateInputEl.focus();
         }
     };
 
+    getDateInputError = () => {
+        const { intl, maxDate = null, minDate = null } = this.props;
+        const { showDateInputError } = this.state;
+        const { formatMessage } = intl;
+
+        if (!showDateInputError) return '';
+
+        let dateInputError = '';
+        const maxLocaleDate = getFormattedDate(maxDate, DateFormat.LOCALE_DATE_STRING_DATE_FORMAT);
+        const minLocaleDate = getFormattedDate(minDate, DateFormat.LOCALE_DATE_STRING_DATE_FORMAT);
+
+        if (maxLocaleDate && minLocaleDate) {
+            dateInputError = formatMessage(messages.dateInputRangeError, { maxLocaleDate, minLocaleDate });
+        } else if (maxLocaleDate) {
+            dateInputError = formatMessage(messages.dateInputMaxError, { maxLocaleDate });
+        } else if (minLocaleDate) {
+            dateInputError = formatMessage(messages.dateInputMinError, { minLocaleDate });
+        }
+
+        return dateInputError;
+    };
+
     handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        const { isKeyboardInputAllowed, isTextInputAllowed } = this.props;
+        const { isKeyboardInputAllowed, isTextInputAllowed, isAccessible } = this.props;
 
         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 || (isAccessible && !this.canUseDateInputType)) && event.key === ENTER_KEY) {
             event.preventDefault();
         }
 
-        if (isTextInputAllowed && event.key === ENTER_KEY) {
+        // Stops enter & spacebar from opening up the browser's default date picker
+        if (isAccessible && (event.key === ENTER_KEY || event.key === ' ')) {
             event.preventDefault();
         }
 
@@ -340,9 +470,51 @@ class DatePicker extends React.Component<DatePickerProps> {
         }
     };
 
-    handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-        const { onBlur, isTextInputAllowed } = this.props;
+    handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { isAccessible, maxDate, minDate, onChange } = this.props;
+        const { isDateInputInvalid } = this.state;
+
+        if (!isAccessible || !this.canUseDateInputType) {
+            return;
+        }
+
+        if (this.datePicker && this.datePicker.isVisible()) {
+            event.stopPropagation();
+        }
+
+        const { value } = event.target;
+        if (this.datePicker && value) {
+            const 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) {
+                const formattedDate = this.formatValue(parsedDate);
+                onChange(parsedDate, formattedDate);
+            }
+        } else if (isDateInputInvalid) {
+            this.setState({ isDateInputInvalid: false, showDateInputError: false });
+        }
+    };
 
+    handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+        const { isAccessible, isTextInputAllowed, onBlur } = this.props;
+        const { isDateInputInvalid } = this.state;
         const nextActiveElement = event.relatedTarget || document.activeElement;
 
         // This is mostly here to cancel out the pikaday hide() on blur
@@ -362,44 +534,142 @@ class DatePicker extends React.Component<DatePickerProps> {
             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
         let inputDate: Date | null | undefined = null;
 
         if (this.dateInputEl) {
-            inputDate = new Date(this.dateInputEl.value);
+            let 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 });
     };
 
     handleButtonClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
         event.preventDefault();
         event.stopPropagation();
+        const { isAccessible, isDisabled } = this.props;
+
+        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();
         }
     };
 
+    handleOnClick = (event: React.SyntheticEvent<HTMLInputElement>) => {
+        const { isAccessible } = this.props;
+
+        if (isAccessible) {
+            // Suppress Firefox default behavior: clicking on input type "date"
+            // opens the browser date picker.
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+
     formatDisplay = (date?: Date | null): string => {
         const { displayFormat, intl } = this.props;
         return date ? intl.formatDate(date, displayFormat) : '';
     };
 
+    formatDisplayDateType = (date?: Date | null): string => {
+        // Input type "date" only accepts the format YYYY-MM-DD
+        return date ? getFormattedDate(date, DateFormat.UTC_ISO_STRING_DATE_FORMAT).slice(0, 10) : '';
+    };
+
+    parseDisplayDateType = (dateString?: string | null): Date | null => {
+        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(`${dateString}T00:00:00`);
+        }
+        return null;
+    };
+
     formatValue = (date: Date | null): string | number => {
         const { dateFormat } = this.props;
         return dateFormat ? getFormattedDate(date, dateFormat) : '';
     };
 
     clearDate = (event: React.SyntheticEvent<HTMLButtonElement>) => {
-        event.preventDefault(); // so datepicker doesn't open after clearing
+        // Prevents the date picker from opening after clearing
+        event.preventDefault();
+        const { isAccessible } = this.props;
+
         if (this.datePicker) {
             this.datePicker.setDate(null);
         }
         this.onSelectHandler(null);
+
+        if (isAccessible) {
+            this.focusDatePicker();
+        }
+    };
+
+    /** Determines whether a new date input falls back to a text input or not */
+    shouldUseAccessibleFallback = (): boolean => {
+        const 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';
+    };
+
+    renderCalendarButton = () => {
+        const { intl, isAccessible, isAlwaysVisible, isDisabled } = this.props;
+        const { formatMessage } = intl;
+
+        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
+        const accessibleAttrs = isAccessible ? { 'aria-hidden': true, tabIndex: -1 } : {};
+
+        return (
+            <PlainButton
+                aria-label={formatMessage(messages.chooseDate)}
+                className="date-picker-open-btn"
+                getDOMRef={ref => {
+                    this.datePickerButtonEl = ref;
+                }}
+                isDisabled={isDisabled}
+                onClick={this.handleButtonClick}
+                type={ButtonType.BUTTON}
+                {...accessibleAttrs}
+            >
+                <Calendar16 />
+            </PlainButton>
+        );
     };
 
     render() {
@@ -413,27 +683,32 @@ class DatePicker extends React.Component<DatePickerProps> {
             hideOptionalLabel,
             inputProps,
             intl,
-            isAlwaysVisible,
+            isAccessible,
             isClearable,
             isDisabled,
             isRequired,
             isTextInputAllowed,
             label,
+            maxDate,
+            minDate,
             name,
             onFocus,
             placeholder,
             resinTarget,
             value,
         } = this.props;
-
+        const { isDateInputInvalid } = this.state;
         const { formatMessage } = intl;
+
+        const errorMessage = error || this.getDateInputError();
+        const hasError = !!errorMessage || isDateInputInvalid;
+        const hasValue = !!value || isDateInputInvalid;
+
         const classes = classNames(className, 'date-picker-wrapper', {
-            'show-clear-btn': !!value,
-            'show-error': !!error,
+            'show-clear-btn': isClearable && hasValue && !isDisabled,
+            'show-error': hasError,
         });
 
-        const hasError = !!error;
-
         const ariaAttrs = {
             'aria-invalid': hasError,
             'aria-required': isRequired,
@@ -443,16 +718,40 @@ class DatePicker extends React.Component<DatePickerProps> {
 
         const resinTargetAttr = resinTarget ? { [RESIN_TAG_TARGET]: resinTarget } : {};
 
-        const valueAttr = isTextInputAllowed
-            ? { defaultValue: this.formatDisplay(value) }
-            : { value: this.formatDisplay(value) };
+        let valueAttr;
+        if (isAccessible) {
+            valueAttr = { defaultValue: this.formatDisplayDateType(value) };
+        } else if (isTextInputAllowed) {
+            valueAttr = { defaultValue: this.formatDisplay(value) };
+        } else {
+            valueAttr = { value: this.formatDisplay(value) };
+        }
 
-        const onChangeAttr = isTextInputAllowed
-            ? {}
-            : {
-                  onChange: noop,
-              };
-        /* fixes proptype error about readonly field (not adding readonly so constraint validation works) */
+        let 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 };
+        }
+
+        let 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, pattern: ISO_DATE_FORMAT_PATTERN.source, title: 'YYYY-MM-DD' };
+        } else {
+            additionalAttrs = {};
+        }
 
         return (
             <div className={classes}>
@@ -466,9 +765,9 @@ class DatePicker extends React.Component<DatePickerProps> {
                             )}
                             <Tooltip
                                 className="date-picker-error-tooltip"
-                                isShown={!!error}
+                                isShown={!!errorMessage}
                                 position={errorTooltipPosition}
-                                text={error || ''}
+                                text={errorMessage || ''}
                                 theme={TooltipTheme.ERROR}
                             >
                                 {customInput ? (
@@ -489,9 +788,10 @@ class DatePicker extends React.Component<DatePickerProps> {
                                         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}
@@ -499,46 +799,32 @@ class DatePicker extends React.Component<DatePickerProps> {
                                         {...ariaAttrs}
                                         {...inputProps}
                                         {...valueAttr}
+                                        {...additionalAttrs}
                                     />
                                 )}
                             </Tooltip>
                             <span id={this.errorMessageID} className="accessibility-hidden" role="alert">
-                                {error}
+                                {errorMessage}
                             </span>
                         </>
                     </Label>
-                    {isClearable && !!value && !isDisabled ? (
+                    {isClearable && hasValue && !isDisabled ? (
                         <PlainButton
                             aria-label={formatMessage(messages.dateClearButton)}
                             className="date-picker-clear-btn"
                             onClick={this.clearDate}
                             type={ButtonType.BUTTON}
                         >
-                            <IconClear height={12} width={12} />
+                            <ClearBadge16 />
                         </PlainButton>
                     ) : null}
-                    {error ? (
-                        <IconAlert
+                    {hasError ? (
+                        <Alert16
                             className="date-picker-icon-alert"
-                            height={13}
                             title={<FormattedMessage {...messages.iconAlertText} />}
-                            width={13}
                         />
                     ) : null}
-                    {!isAlwaysVisible && (
-                        <PlainButton
-                            aria-label={formatMessage(messages.chooseDate)}
-                            className="date-picker-open-btn"
-                            getDOMRef={ref => {
-                                this.datePickerButtonEl = ref;
-                            }}
-                            isDisabled={isDisabled}
-                            onClick={this.handleButtonClick}
-                            type={ButtonType.BUTTON}
-                        >
-                            <IconCalendar height={17} width={16} />
-                        </PlainButton>
-                    )}
+                    {this.renderCalendarButton()}
                     <input
                         className="date-picker-unix-time-input"
                         name={name}