Respect showOutsideDays prop for single month date range

packages/datetime/src/common/classes.ts

@@ -45,6 +45,7 @@ export const DATERANGEPICKER = `${NS}-daterangepicker`;
 export const DATERANGEPICKER_CALENDARS = `${DATERANGEPICKER}-calendars`;
 export const DATERANGEPICKER_CONTIGUOUS = `${DATERANGEPICKER}-contiguous`;
 export const DATERANGEPICKER_SINGLE_MONTH = `${DATERANGEPICKER}-single-month`;
+export const DATERANGEPICKER_SHOWING_OUTSIDE_DAYS = `${DATERANGEPICKER}-showing-outside-days`;
 export const DATERANGEPICKER_DAY_SELECTED_RANGE = `${DATEPICKER_DAY}--selected-range`;
 export const DATERANGEPICKER_DAY_HOVERED_RANGE = `${DATEPICKER_DAY}--hovered-range`;
 export const DATERANGEPICKER_SHORTCUTS = `${DATERANGEPICKER}-shortcuts`;

packages/datetime2/src/common/errors.ts

@@ -0,0 +1,2 @@
+export const WARNING_IGNORED_SHOW_OUTSIDE_DAYS_PROP =
+ "dayPickerProps.showOutsideDays will only be applied if the DateRangePicker is displaying a single month, either through the singleMonthOnly propm, or with a minDate and maxDate of the same month.";

packages/datetime2/src/components/date-range-picker3/_date-range-picker3.scss

@@ -59,6 +59,14 @@
  }
  }
 
+ // showing outside days is allowed for single months
+ /* stylelint-disable max-line-length */
+ &.#{$ns}-datepicker.#{$ns}-daterangepicker-single-month.#{$ns}-daterangepicker-showing-outside-days .rdp-day_outside {
+ // weird interactions happen if allowing outside days to be clicked
+ pointer-events: none;
+ visibility: visible;
+ }
+
  // need some extra specificity to override DatePicker styles
  &.#{$ns}-datepicker .rdp-day {
  // we only want outside days to be shown when displaying one month at a time

packages/datetime2/src/components/date-range-picker3/date-range-picker3.md

@@ -64,6 +64,9 @@ The **preset shortcuts** can be seen in the example above. They are as follows:
 
 @## Props interface
 
+The `showOutsideDays` prop on `dayPickerProps` will only be respected when a single month is shown.
+This is to avoid a possible double representation of a selected date range.
+
 @interface DateRangePicker3Props
 
 @## Localization

packages/datetime2/src/components/date-range-picker3/dateRangePicker3.tsx

@@ -42,6 +42,7 @@ import { ContiguousDayRangePicker } from "./contiguousDayRangePicker";
 import type { DateRangePicker3DefaultProps, DateRangePicker3Props } from "./dateRangePicker3Props";
 import type { DateRangePicker3State } from "./dateRangePicker3State";
 import { NonContiguousDayRangePicker } from "./nonContiguousDayRangePicker";
+import { WARNING_IGNORED_SHOW_OUTSIDE_DAYS_PROP } from "../../common/errors";
 
 export type { DateRangePicker3Props };
 
@@ -120,6 +121,10 @@ export class DateRangePicker3 extends DateFnsLocalizedComponent<DateRangePicker3
  time,
  value,
  };
+
+ if (!getIsSingleMonthOnly(this.props) && this.props.dayPickerProps?.showOutsideDays) {
+ console.warn(WARNING_IGNORED_SHOW_OUTSIDE_DAYS_PROP);
+ }
  }
 
  public render() {
@@ -131,6 +136,7 @@ export class DateRangePicker3 extends DateFnsLocalizedComponent<DateRangePicker3
  [Classes.DATERANGEPICKER_CONTIGUOUS]: contiguousCalendarMonths,
  [Classes.DATERANGEPICKER_SINGLE_MONTH]: isSingleMonthOnly,
  [Classes.DATERANGEPICKER3_REVERSE_MONTH_AND_YEAR]: this.props.reverseMonthAndYearMenus,
+ [Classes.DATERANGEPICKER_SHOWING_OUTSIDE_DAYS]: this.props.dayPickerProps?.showOutsideDays,
  });
 
  // use the left DayPicker when we only need one

packages/datetime2/test/components/dateRangePicker3Tests.tsx

@@ -1332,6 +1332,33 @@ describe("<DateRangePicker3>", () => {
  });
  });
 
+ describe("outside days", () => {
+ it("visually hides outside days when contiguous months are shown, even if showOutsideDays is true", () => {
+ const { left } = render({ initialMonth: new Date(2015, Months.DECEMBER, 2), dayPickerProps: { showOutsideDays: true } });
+ assert.equal(left.findOutsideDays().first().getDOMNode().computedStyleMap().get("visibility")?.toString(), "hidden");
+ });
+
+ it("allows outside days to be shown for single month date range", () => {
+ const { left } = render({ initialMonth: new Date(2015, Months.DECEMBER, 2), singleMonthOnly: true, dayPickerProps: { showOutsideDays: true } });
+ assert.equal(left.findOutsideDays().first().getDOMNode().computedStyleMap().get("visibility")?.toString(), "visible");
+ });
+
+ it("does not allow outside days to be selected even when visible", () => {
+ const { left } = render({ initialMonth: new Date(2015, Months.DECEMBER, 2), singleMonthOnly: true, dayPickerProps: { showOutsideDays: true } });
+
+ assert.equal(left.findOutsideDays().first().getDOMNode().computedStyleMap().get("pointer-events")?.toString(), "none");
+
+ // simulated clicks appear to not respect pointerEvents style or else would test with below
+ //
+ // November 29th is first outside day shown for December 2015
+ // assert.equal(left.findOutsideDays().first().text(), "29");
+ //
+ // this click would navigate to November if interaction was allowed
+ // left.findOutsideDays().first().simulate("click");
+ // left.assertDisplayMonth(Months.DECEMBER, 2015);
+ });
+ });
+
  function dayNotOutside(day: ReactWrapper) {
  return !day.hasClass(Datetime2Classes.DATEPICKER3_DAY_OUTSIDE);
  }
@@ -1460,10 +1487,12 @@ describe("<DateRangePicker3>", () => {
  return harness
  .findDays()
  .filterWhere(day => day.text() === "" + dayNumber)
- .filterWhere(day => !day.hasClass(Datetime2Classes.DATEPICKER3_DAY_OUTSIDE))
+ .filterWhere(dayNotOutside)
  .first();
  },
  findDays: () => harness.wrapper.find(`.${Datetime2Classes.DATEPICKER3_DAY}`),
+ findOutsideDays: () =>
+ harness.wrapper.find(`.${Datetime2Classes.DATEPICKER3_DAY}`).filterWhere(day => !dayNotOutside(day)),
  mouseEnterDay: (dayNumber = 1) => {
  harness.findDay(dayNumber).simulate("mouseenter");
  return harness;

packages/docs-app/src/examples/datetime2-examples/dateRangePicker3Example.tsx

@@ -16,8 +16,8 @@
 
 import * as React from "react";
 
-import { Classes, FormGroup, Switch } from "@blueprintjs/core";
-import type { DateRange, TimePrecision } from "@blueprintjs/datetime";
+import { Classes, FormGroup, Switch, Tooltip } from "@blueprintjs/core";
+import { DateUtils, type DateRange, type TimePrecision } from "@blueprintjs/datetime";
 import { DateRangePicker3 } from "@blueprintjs/datetime2";
 import { Example, type ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
 
@@ -41,6 +41,7 @@ interface DateRangePicker3ExampleState {
  showTimeArrowButtons: boolean;
  timePrecision: TimePrecision | undefined;
  useAmPm: boolean;
+ showOutsideDays: boolean;
 }
 
 export class DateRangePicker3Example extends React.PureComponent<ExampleProps, DateRangePicker3ExampleState> {
@@ -53,6 +54,7 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
  minDate: undefined,
  reverseMonthAndYearMenus: false,
  shortcuts: true,
+ showOutsideDays: true,
  showTimeArrowButtons: false,
  singleMonthOnly: false,
  timePrecision: undefined,
@@ -91,6 +93,8 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
  this.setState({ contiguousCalendarMonths });
  });
 
+ private toggleShowOutsideDays = handleBooleanChange(showOutsideDays => this.setState({ showOutsideDays }));
+
  public render() {
  const { dateRange, localeCode, maxDate, minDate, showTimeArrowButtons, timePrecision, useAmPm, ...props } =
  this.state;
@@ -105,6 +109,9 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
  maxDate={maxDate}
  minDate={minDate}
  onChange={this.handleDateRangeChange}
+ dayPickerProps={{
+ showOutsideDays: this.state.showOutsideDays,
+ }}
  timePickerProps={
  showTimePicker
  ? { precision: timePrecision, showArrowButtons: showTimeArrowButtons, useAmPm }
@@ -131,6 +138,18 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
  label="Single month only"
  onChange={this.toggleSingleMonth}
  />
+ <Tooltip content="Only respected when showing a single month calendar">
+ <Switch
+ checked={this.state.showOutsideDays}
+ className="keep-bottom-margin"
+ disabled={
+ !this.state.singleMonthOnly &&
+ !DateUtils.isSameMonth(this.state.minDate, this.state.maxDate)
+ }
+ label="Show outside days"
+ onChange={this.toggleShowOutsideDays}
+ />
+ </Tooltip>
  <Switch
  checked={this.state.contiguousCalendarMonths}
  disabled={this.state.singleMonthOnly}

packages/docs-theme/src/styles/_examples.scss

@@ -79,9 +79,10 @@ $example-spacing: $pt-grid-size * 4;
  font-size: $pt-font-size-small;
  }
 
- .#{$ns}-control:last-child,
- .#{$ns}-form-group:last-child,
- .#{$ns}-label:last-child {
+ // add a "keep-bottom-margin" class to avoid removing the bottom margin due to the tooltip wrapper
+ .#{$ns}-control:last-child:not(.keep-bottom-margin),
+ .#{$ns}-form-group:last-child:not(.keep-bottom-margin),
+ .#{$ns}-label:last-child:not(.keep-bottom-margin) {
  margin-bottom: 0;
  }