Single Month Only Prop in DateRangePicker (#3142)

* allow singleMonthlyOnly in DateRangePicker

* updated docs comment

* added singleMonthOnly props in DateRangeInput

* added DateRangeInput test to ensure prop is passed

* updated documentation and example labels

packages/datetime/src/dateRangeInput.tsx

@@ -128,6 +128,12 @@ export interface IDateRangeInputProps extends IDatePickerBaseProps, IDateFormatP
      */
     shortcuts?: boolean | IDateRangeShortcut[];
 
+    /**
+     * Whether to show only a single month calendar.
+     * @default false
+     */
+    singleMonthOnly?: boolean;
+
     /**
      * Props to pass to the start-date [input group](#core/components/text-inputs.input-group).
      * `disabled` and `value` will be ignored in favor of the top-level props on this component.
@@ -202,6 +208,7 @@ export class DateRangeInput extends AbstractPureComponent<IDateRangeInputProps,
         popoverProps: {},
         selectAllOnFocus: false,
         shortcuts: true,
+        singleMonthOnly: false,
         startInputProps: {},
     };
 

packages/datetime/src/dateRangePicker.tsx

@@ -100,6 +100,12 @@ export interface IDateRangePickerProps extends IDatePickerBaseProps, IProps {
      */
     shortcuts?: boolean | IDateRangeShortcut[];
 
+    /**
+     * Whether to show only a single month calendar.
+     * @default false
+     */
+    singleMonthOnly?: boolean;
+
     /**
      * The currently selected `DateRange`.
      * If this prop is provided, the component acts in a controlled manner.
@@ -125,6 +131,7 @@ export class DateRangePicker extends AbstractPureComponent<IDateRangePickerProps
         minDate: getDefaultMinDate(),
         reverseMonthAndYearMenus: false,
         shortcuts: true,
+        singleMonthOnly: false,
         timePickerProps: {},
     };
 
@@ -194,8 +201,8 @@ export class DateRangePicker extends AbstractPureComponent<IDateRangePickerProps
     }
 
     public render() {
-        const { className, contiguousCalendarMonths } = this.props;
-        const isShowingOneMonth = DateUtils.areSameMonth(this.props.minDate, this.props.maxDate);
+        const { className, contiguousCalendarMonths, singleMonthOnly } = this.props;
+        const isShowingOneMonth = singleMonthOnly || DateUtils.areSameMonth(this.props.minDate, this.props.maxDate);
 
         const classes = classNames(DateClasses.DATEPICKER, DateClasses.DATERANGEPICKER, className, {
             [DateClasses.DATERANGEPICKER_CONTIGUOUS]: contiguousCalendarMonths,

packages/datetime/test/dateRangeInputTests.tsx

@@ -270,6 +270,12 @@ describe("<DateRangeInput>", () => {
         expect(root.find(DateRangePicker).prop("contiguousCalendarMonths")).to.be.false;
     });
 
+    it("accepts singleMonthOnly prop and passes it to the date range picker", () => {
+        const { root } = wrap(<DateRangeInput {...DATE_FORMAT} singleMonthOnly={false} />);
+        root.setState({ isOpen: true });
+        expect(root.find(DateRangePicker).prop("singleMonthOnly")).to.be.false;
+    });
+
     it("accepts shortcuts prop and passes it to the date range picker", () => {
         const { root } = wrap(<DateRangeInput {...DATE_FORMAT} shortcuts={false} />);
         root.setState({ isOpen: true });

packages/datetime/test/dateRangePickerTests.tsx

@@ -355,6 +355,11 @@ describe("<DateRangePicker>", () => {
             assert.isTrue(wrapper.find(Button).every({ disabled: true }));
         });
 
+        it("only shows one calendar when singleMonthOnly is set", () => {
+            const { right } = render({ singleMonthOnly: true });
+            assert.isFalse(right.wrapper.exists());
+        });
+
         it("left calendar is bound between minDate and (maxDate - 1 month)", () => {
             const minDate = new Date(2015, Months.JANUARY, 1);
             const maxDate = new Date(2015, Months.DECEMBER, 15);

packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx

@@ -21,6 +21,8 @@ export interface IDateRangeInputExampleState {
     range: DateRange;
     reverseMonthAndYearMenus: boolean;
     selectAllOnFocus: boolean;
+    shortcuts: boolean;
+    singleMonthOnly: boolean;
 }
 
 export class DateRangeInputExample extends React.PureComponent<IExampleProps, IDateRangeInputExampleState> {
@@ -33,6 +35,8 @@ export class DateRangeInputExample extends React.PureComponent<IExampleProps, ID
         range: [null, null],
         reverseMonthAndYearMenus: false,
         selectAllOnFocus: false,
+        shortcuts: true,
+        singleMonthOnly: false,
     };
 
     private toggleContiguous = handleBooleanChange(contiguous => {
@@ -45,6 +49,8 @@ export class DateRangeInputExample extends React.PureComponent<IExampleProps, ID
     private toggleSelection = handleBooleanChange(closeOnSelection => this.setState({ closeOnSelection }));
     private toggleSelectAllOnFocus = handleBooleanChange(selectAllOnFocus => this.setState({ selectAllOnFocus }));
     private toggleSingleDay = handleBooleanChange(allowSingleDayRange => this.setState({ allowSingleDayRange }));
+    private toggleSingleMonth = handleBooleanChange(singleMonthOnly => this.setState({ singleMonthOnly }));
+    private toggleShortcuts = handleBooleanChange(shortcuts => this.setState({ shortcuts }));
 
     public render() {
         const { format, range, ...spreadProps } = this.state;
@@ -65,6 +71,12 @@ export class DateRangeInputExample extends React.PureComponent<IExampleProps, ID
                     label="Allow single day range"
                     onChange={this.toggleSingleDay}
                 />
+                <Switch
+                    checked={this.state.singleMonthOnly}
+                    label="Single month only"
+                    onChange={this.toggleSingleMonth}
+                />
+                <Switch checked={this.state.shortcuts} label="Show shortcuts" onChange={this.toggleShortcuts} />
                 <Switch
                     checked={this.state.closeOnSelection}
                     label="Close on selection"

packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx

@@ -21,6 +21,7 @@ import { PrecisionSelect } from "./common/precisionSelect";
 
 export interface IDateRangePickerExampleState {
     allowSingleDayRange?: boolean;
+    singleMonthOnly?: boolean;
     contiguousCalendarMonths?: boolean;
     dateRange?: DateRange;
     maxDateIndex?: number;
@@ -70,6 +71,7 @@ export class DateRangePickerExample extends React.PureComponent<IExampleProps, I
         minDateIndex: 0,
         reverseMonthAndYearMenus: false,
         shortcuts: true,
+        singleMonthOnly: false,
     };
 
     private handleMaxDateIndexChange = handleNumberChange(maxDateIndex => this.setState({ maxDateIndex }));
@@ -82,6 +84,7 @@ export class DateRangePickerExample extends React.PureComponent<IExampleProps, I
         this.setState({ reverseMonthAndYearMenus }),
     );
     private toggleSingleDay = handleBooleanChange(allowSingleDayRange => this.setState({ allowSingleDayRange }));
+    private toggleSingleMonth = handleBooleanChange(singleMonthOnly => this.setState({ singleMonthOnly }));
     private toggleShortcuts = handleBooleanChange(shortcuts => this.setState({ shortcuts }));
     private toggleContiguousCalendarMonths = handleBooleanChange(contiguousCalendarMonths => {
         this.setState({ contiguousCalendarMonths });
@@ -115,6 +118,11 @@ export class DateRangePickerExample extends React.PureComponent<IExampleProps, I
                         label="Allow single day range"
                         onChange={this.toggleSingleDay}
                     />
+                    <Switch
+                        checked={this.state.singleMonthOnly}
+                        label="Single month only"
+                        onChange={this.toggleSingleMonth}
+                    />
                     <Switch
                         checked={this.state.contiguousCalendarMonths}
                         label="Constrain to contiguous months"