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,18 @@
+/*
+ * Copyright 2024 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const WARNING_IGNORED_SHOW_OUTSIDE_DAYS_PROP =
+ "dayPickerProps.showOutsideDays will only be applied if the DateRangePicker3 is displaying a single month, either through the singleMonthOnly prop, 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 @@
  }
  }
 
+
+ /* stylelint-disable max-line-length */
+ &.#{$ns}-datepicker.#{$ns}-daterangepicker-single-month.#{$ns}-daterangepicker-showing-outside-days .rdp-day_outside {
+ pointer-events: none; // weird interactions happen if allowing outside days to be clicked
+ visibility: visible; // showing outside days is allowed for single months
+ }
+ /* stylelint-enable max-line-length */
+
  // 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

@@ -35,6 +35,7 @@ import {
 
 import { Classes, dayPickerClassNameOverrides } from "../../classes";
 import { combineModifiers, HOVERED_RANGE_MODIFIER } from "../../common/dayPickerModifiers";
+import { WARNING_IGNORED_SHOW_OUTSIDE_DAYS_PROP } from "../../common/errors";
 import { DatePicker3Provider } from "../date-picker3/datePicker3Context";
 import { DateFnsLocalizedComponent } from "../dateFnsLocalizedComponent";
 
@@ -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

@@ -20,7 +20,7 @@ import enUSLocale from "date-fns/locale/en-US";
 import { mount, type ReactWrapper } from "enzyme";
 import * as React from "react";
 import { type DayModifiers, DayPicker, type ModifiersClassNames } from "react-day-picker";
-import sinon from "sinon";
+import sinon, { stub } from "sinon";
 
 import { Button, Classes, Menu, MenuItem } from "@blueprintjs/core";
 import {
@@ -1332,6 +1332,55 @@ describe("<DateRangePicker3>", () => {
  });
  });
 
+ describe("outside days", () => {
+ it("visually hides outside days when contiguous months are shown, even if showOutsideDays is true", () => {
+ const warnSpy = stub(console, "warn");
+ const { left } = render({
+ dayPickerProps: { showOutsideDays: true },
+ initialMonth: new Date(2015, Months.DECEMBER, 2),
+ });
+ assert.strictEqual(warnSpy.callCount, 1);
+ 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({
+ dayPickerProps: { showOutsideDays: true },
+ initialMonth: new Date(2015, Months.DECEMBER, 2),
+ singleMonthOnly: 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({
+ dayPickerProps: { showOutsideDays: true },
+ initialMonth: new Date(2015, Months.DECEMBER, 2),
+ singleMonthOnly: 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 +1509,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 { type DateRange, DateUtils, 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;
  }