diff --git a/package.json b/package.json
index 3d7b2e38..a2db1314 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "prop-types": "^15.6.0",
     "react-calendar": "^2.18.0",
     "react-date-picker": "^7.5.0",
-    "react-fit": "^1.0.3",
+    "react-fit": "^1.0.5",
     "react-lifecycles-compat": "^3.0.4"
   },
   "devDependencies": {
diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx
index 485ada9f..4a601707 100644
--- a/src/DateRangePicker.jsx
+++ b/src/DateRangePicker.jsx
@@ -118,6 +118,7 @@ export default class DateRangePicker extends PureComponent {
   renderInputs() {
     const {
       calendarIcon,
+      calendarIconPosition,
       clearIcon,
       disabled,
       format,
@@ -132,6 +133,19 @@ export default class DateRangePicker extends PureComponent {
     } = this.props;
     const { isOpen } = this.state;
 
+    const calendarButton = calendarIcon !== null && (
+      <button
+        className={`${baseClassName}__calendar-button ${baseClassName}__button`}
+        disabled={disabled}
+        onClick={this.toggleCalendar}
+        onFocus={this.stopPropagation}
+        onBlur={this.resetValue}
+        type="button"
+      >
+        {calendarIcon}
+      </button>
+    );
+
     const [valueFrom, valueTo] = [].concat(value);
 
     const commonProps = {
@@ -146,9 +160,11 @@ export default class DateRangePicker extends PureComponent {
       required,
       showLeadingZeros,
     };
-
     return (
       <div className={`${baseClassName}__wrapper`}>
+        {
+          calendarIconPosition === 'left' ? calendarButton : null
+        }
         <DateInput
           {...commonProps}
           name={`${name}_from`}
@@ -177,18 +193,9 @@ export default class DateRangePicker extends PureComponent {
             {clearIcon}
           </button>
         )}
-        {calendarIcon !== null && (
-          <button
-            className={`${baseClassName}__calendar-button ${baseClassName}__button`}
-            disabled={disabled}
-            onClick={this.toggleCalendar}
-            onFocus={this.stopPropagation}
-            onBlur={this.resetValue}
-            type="button"
-          >
-            {calendarIcon}
-          </button>
-        )}
+        {
+          calendarIconPosition === 'right' ? calendarButton : null
+        }
       </div>
     );
   }
@@ -278,6 +285,7 @@ DateRangePicker.defaultProps = {
   clearIcon: ClearIcon,
   isOpen: null,
   name: 'daterange',
+  calendarIconPosition: 'left',
 };
 
 DateRangePicker.propTypes = {
@@ -287,6 +295,7 @@ DateRangePicker.propTypes = {
     PropTypes.arrayOf(PropTypes.string),
   ]),
   calendarIcon: PropTypes.node,
+  calendarIconPosition: PropTypes.string,
   className: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string),
@@ -299,7 +308,8 @@ DateRangePicker.propTypes = {
   onCalendarClose: PropTypes.func,
   onCalendarOpen: PropTypes.func,
   required: PropTypes.bool,
-  showLeadingZeros: PropTypes.bool,
+  showLeadingZeros: PropTypes.bool
+  ,
 };
 
 polyfill(DateRangePicker);