Fix for the issue of selectively disabling start or end date in dateRangePicker

examples/DateRangePickerWrapper.jsx

@@ -40,6 +40,7 @@ const defaultProps = {
   endDateId: END_DATE,
   endDatePlaceholderText: 'End Date',
   disabled: false,
+  selectivelyDisabled: 'none',
   required: false,
   screenReaderInputMessage: '',
   showClearDates: false,

src/components/DateRangePicker.jsx

@@ -53,6 +53,7 @@ const defaultProps = {
   startDatePlaceholderText: 'Start Date',
   endDatePlaceholderText: 'End Date',
   disabled: false,
+  selectivelyDisabled: 'none',
   required: false,
   readOnly: false,
   screenReaderInputMessage: '',
@@ -457,6 +458,7 @@ class DateRangePicker extends React.Component {
       customArrowIcon,
       customCloseIcon,
       disabled,
+      selectivelyDisabled,
       required,
       readOnly,
       openDirection,
@@ -511,6 +513,7 @@ class DateRangePicker extends React.Component {
             customArrowIcon={customArrowIcon}
             customCloseIcon={customCloseIcon}
             disabled={disabled}
+            selectivelyDisabled={selectivelyDisabled}
             required={required}
             readOnly={readOnly}
             openDirection={openDirection}

src/components/DateRangePickerInput.jsx

@@ -49,6 +49,7 @@ const propTypes = forbidExtraProps({
   isEndDateFocused: PropTypes.bool,
   showClearDates: PropTypes.bool,
   disabled: PropTypes.bool,
+  selectivelyDisabled: PropTypes.string,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
@@ -96,6 +97,7 @@ const defaultProps = {
   isEndDateFocused: false,
   showClearDates: false,
   disabled: false,
+  selectivelyDisabled: 'none',
   required: false,
   readOnly: false,
   openDirection: OPEN_DOWN,
@@ -141,6 +143,7 @@ function DateRangePickerInput({
   onClearDates,
   showClearDates,
   disabled,
+  selectivelyDisabled,
   required,
   readOnly,
   showCaret,
@@ -201,6 +204,9 @@ function DateRangePickerInput({
     </button>
   );
 
+  const isStartDateDisabled = ((selectivelyDisabled === 'startDate') || disabled);
+  const isEndDateDisabled = ((selectivelyDisabled === 'endDate') || disabled);
+
   return (
     <div
       {...css(
@@ -221,7 +227,7 @@ function DateRangePickerInput({
         screenReaderMessage={screenReaderText}
         focused={isStartDateFocused}
         isFocused={isFocused}
-        disabled={disabled}
+        disabled={isStartDateDisabled}
         required={required}
         readOnly={readOnly}
         showCaret={showCaret}
@@ -251,7 +257,7 @@ function DateRangePickerInput({
         screenReaderMessage={screenReaderText}
         focused={isEndDateFocused}
         isFocused={isFocused}
-        disabled={disabled}
+        disabled={isEndDateDisabled}
         required={required}
         readOnly={readOnly}
         showCaret={showCaret}

src/components/DateRangePickerInputController.jsx

@@ -38,6 +38,7 @@ const propTypes = forbidExtraProps({
   showDefaultInputIcon: PropTypes.bool,
   inputIconPosition: IconPositionShape,
   disabled: PropTypes.bool,
+  selectivelyDisabled: PropTypes.string,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
@@ -90,6 +91,7 @@ const defaultProps = {
   showDefaultInputIcon: false,
   inputIconPosition: ICON_BEFORE_POSITION,
   disabled: false,
+  selectivelDisabled: 'none',
   required: false,
   readOnly: false,
   openDirection: OPEN_DOWN,
@@ -264,6 +266,7 @@ export default class DateRangePickerInputController extends React.Component {
       customArrowIcon,
       customCloseIcon,
       disabled,
+      selectivelyDisabled,
       required,
       readOnly,
       openDirection,
@@ -294,6 +297,7 @@ export default class DateRangePickerInputController extends React.Component {
         isEndDateFocused={isEndDateFocused}
         isFocused={isFocused}
         disabled={disabled}
+        selectivelyDisabled={selectivelyDisabled}
         required={required}
         readOnly={readOnly}
         openDirection={openDirection}

src/shapes/DateRangePickerShape.js

@@ -30,6 +30,7 @@ export default {
   endDateId: PropTypes.string.isRequired,
   endDatePlaceholderText: PropTypes.string,
   disabled: PropTypes.bool,
+  selectivelyDisabled: PropTypes.string,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   screenReaderInputMessage: PropTypes.string,