51374 add no defined ranges option

demo/src/components/Main.js

@@ -222,6 +222,33 @@ export default class Main extends Component {
           </div>
         </Section>
 
+        <Section title="DateRangePicker - 2 month with no Defined Ranges">
+          <div>
+            <input
+              type="text"
+              readOnly
+              value={formatDateDisplay(this.state.dateRangePicker.selection.startDate)}
+            />
+            <input
+              type="text"
+              readOnly
+              value={formatDateDisplay(this.state.dateRangePicker.selection.endDate)}
+            />
+          </div>
+          <div>
+            <DateRangePicker
+              onChange={this.handleRangeChange.bind(this, 'dateRangePicker')}
+              showSelectionPreview={true}
+              moveRangeOnFirstSelection={false}
+              className={'PreviewArea'}
+              months={2}
+              ranges={[this.state.dateRangePicker.selection]}
+              direction="horizontal"
+              showDefinedRange={false}
+            />
+          </div>
+        </Section>
+
         <Section title="DateRangePicker - Vertical Infinite">
           <div>
             <input

src/components/DateRangePicker.js

@@ -33,15 +33,17 @@ class DateRangePicker extends Component {
     const { focusedRange } = this.state;
     return (
       <div className={classnames(this.styles.dateRangePickerWrapper, this.props.className)}>
-        <DefinedRange
-          focusedRange={focusedRange}
-          onPreviewChange={value => this.dateRange.updatePreview(value)}
-          {...this.props}
-          range={this.props.ranges[focusedRange[0]]}
-          className={undefined}
-          onChange={specialHandleChange}
-          label={this.props.label}
-        />
+        { this.props.showDefinedRange !== false ? (
+          <DefinedRange
+            focusedRange={focusedRange}
+            onPreviewChange={value => this.dateRange.updatePreview(value)}
+            {...this.props}
+            range={this.props.ranges[focusedRange[0]]}
+            className={undefined}
+            onChange={specialHandleChange}
+            label={this.props.label}
+          />
+        ) : null}
         <DateRange
           onRangeFocusChange={focusedRange => this.setState({ focusedRange })}
           focusedRange={focusedRange}