Merge pull request #4288 from Hacker0x01/week-picker-2023

Week picker (2nd attempt)

Author: martijnrusschen

CONTRIBUTING.md

@@ -28,11 +28,16 @@ Start reading our code, and you'll get the hang of it. We optimize for readabili
 Local development configuration is pretty snappy. Here's how to get set up:
 
 1. Install/use node >=16.0.0
+1. Install/use yarn <=1.x.x
 1. Run `yarn link` from project root
 1. Run `cd docs-site && yarn link react-datepicker`
 1. Run `yarn install` from project root
 1. Run `yarn build` from project root (at least the first time, this will get you the `dist` directory that holds the code that will be linked to)
-1. Run `yarn start` from project root
+1. Run `yarn start` from project root. (This command launches a documentation app and runs it as a simple webserver at http://localhost:3000.)
 1. Open new terminal window
+1. Run `yarn build-dev` from project root. (This command sets up a development environment that keeps an eye on any file changes. When a file is updated, it auto-builds using the latest code.)
+
+You can run `yarn test` to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in `/tests`). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
+
 1. After each JS change run `yarn build:js` in project root
 1. After each SCSS change run `yarn run css:dev && yarn run css:modules:dev` in project root

docs-site/src/components/Examples/index.js

@@ -79,6 +79,7 @@ import RenderCustomYear from "../../examples/renderCustomYear";
 import TimeInput from "../../examples/timeInput";
 import StrictParsing from "../../examples/strictParsing";
 import MonthPicker from "../../examples/monthPicker";
+import WeekPicker from "../../examples/weekPicker";
 import monthPickerFullName from "../../examples/monthPickerFullName";
 import monthPickerTwoColumns from "../../examples/monthPickerTwoColumns";
 import monthPickerFourColumns from "../../examples/monthPickerFourColumns";
@@ -512,6 +513,10 @@ export default class exampleComponents extends React.Component {
       title: "Calendar Start day",
       component: CalendarStartDay,
     },
+    {
+      title: "Week Picker",
+      component: WeekPicker,
+    },
     {
       title: "External Form",
       component: ExternalForm,

docs-site/src/examples/weekPicker.js

@@ -0,0 +1,13 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date("2021/02/22"));
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      dateFormat="I/R"
+      locale="en-GB"
+      showWeekNumbers
+      showWeekPicker
+    />
+  );
+};

docs/index.md

@@ -133,6 +133,7 @@
 | `showTimeSelectOnly`            | `bool`                         |                            |             |
 | `showTwoColumnMonthYearPicker`  | `bool`                         | `false`                    |             |
 | `showWeekNumbers`               | `bool`                         |                            |             |
+| `showWeekPicker`                | `bool`                         | `false`                    |             |
 | `showYearDropdown`              | `bool`                         |                            |             |
 | `showYearPicker`                | `bool`                         | `false`                    |             |
 | `startDate`                     | `instanceOfDate`               |                            |             |

src/calendar.jsx

@@ -140,6 +140,7 @@ export default class Calendar extends React.Component {
     showFourColumnMonthYearPicker: PropTypes.bool,
     showYearPicker: PropTypes.bool,
     showQuarterYearPicker: PropTypes.bool,
+    showWeekPicker: PropTypes.bool,
     showTimeSelectOnly: PropTypes.bool,
     timeFormat: PropTypes.string,
     timeIntervals: PropTypes.number,
@@ -941,6 +942,7 @@ export default class Calendar extends React.Component {
             }
             showYearPicker={this.props.showYearPicker}
             showQuarterYearPicker={this.props.showQuarterYearPicker}
+            showWeekPicker={this.props.showWeekPicker}
             isInputFocused={this.props.isInputFocused}
             containerRef={this.containerRef}
             monthShowsDuplicateDaysEnd={monthShowsDuplicateDaysEnd}

src/day.jsx

@@ -14,6 +14,7 @@ import {
   isBefore,
   isAfter,
   getDayOfWeekCode,
+  getStartOfWeek,
   formatDate,
 } from "./date_utils";
 
@@ -38,6 +39,8 @@ export default class Day extends React.Component {
     selectsEnd: PropTypes.bool,
     selectsStart: PropTypes.bool,
     selectsRange: PropTypes.bool,
+    showWeekPicker: PropTypes.bool,
+    showWeekNumber: PropTypes.bool,
     selectsDisabledDaysInRange: PropTypes.bool,
     startDate: PropTypes.instanceOf(Date),
     renderDayContents: PropTypes.func,
@@ -52,6 +55,7 @@ export default class Day extends React.Component {
       PropTypes.string,
       PropTypes.shape({ locale: PropTypes.object }),
     ]),
+    calendarStartDay: PropTypes.number,
   };
 
   componentDidMount() {
@@ -90,13 +94,38 @@ export default class Day extends React.Component {
 
   isKeyboardSelected = () =>
     !this.props.disabledKeyboardNavigation &&
-    !this.isSameDay(this.props.selected) &&
-    this.isSameDay(this.props.preSelection);
+    !(
+      this.isSameDay(this.props.selected) ||
+      this.isSameWeek(this.props.selected)
+    ) &&
+    (this.isSameDay(this.props.preSelection) ||
+      this.isSameWeek(this.props.preSelection));
 
   isDisabled = () => isDayDisabled(this.props.day, this.props);
 
   isExcluded = () => isDayExcluded(this.props.day, this.props);
 
+  isStartOfWeek = () =>
+    isSameDay(
+      this.props.day,
+      getStartOfWeek(
+        this.props.day,
+        this.props.locale,
+        this.props.calendarStartDay,
+      ),
+    );
+
+  isSameWeek = (other) =>
+    this.props.showWeekPicker &&
+    isSameDay(
+      other,
+      getStartOfWeek(
+        this.props.day,
+        this.props.locale,
+        this.props.calendarStartDay,
+      ),
+    );
+
   getHighLightedClass = () => {
     const { day, highlightDates } = this.props;
 
@@ -246,7 +275,8 @@ export default class Day extends React.Component {
 
   isCurrentDay = () => this.isSameDay(newDate());
 
-  isSelected = () => this.isSameDay(this.props.selected);
+  isSelected = () =>
+    this.isSameDay(this.props.selected) || this.isSameWeek(this.props.selected);
 
   getClassNames = (date) => {
     const dayClassName = this.props.dayClassName
@@ -309,10 +339,14 @@ export default class Day extends React.Component {
   getTabIndex = (selected, preSelection) => {
     const selectedDay = selected || this.props.selected;
     const preSelectionDay = preSelection || this.props.preSelection;
-
     const tabIndex =
-      this.isKeyboardSelected() ||
-      (this.isSameDay(selectedDay) && isSameDay(preSelectionDay, selectedDay))
+      !(
+        this.props.showWeekPicker &&
+        (this.props.showWeekNumber || !this.isStartOfWeek())
+      ) &&
+      (this.isKeyboardSelected() ||
+        (this.isSameDay(selectedDay) &&
+          isSameDay(preSelectionDay, selectedDay)))
         ? 0
         : -1;
 

src/index.jsx

@@ -37,6 +37,7 @@ import {
   getHightLightDaysMap,
   getYear,
   getMonth,
+  getStartOfWeek,
   registerLocale,
   setDefaultLocale,
   getDefaultLocale,
@@ -108,6 +109,7 @@ export default class DatePicker extends React.Component {
       showFourColumnMonthYearPicker: false,
       showYearPicker: false,
       showQuarterYearPicker: false,
+      showWeekPicker: false,
       strictParsing: false,
       timeIntervals: 30,
       timeCaption: "Time",
@@ -256,6 +258,7 @@ export default class DatePicker extends React.Component {
     showFourColumnMonthYearPicker: PropTypes.bool,
     showYearPicker: PropTypes.bool,
     showQuarterYearPicker: PropTypes.bool,
+    showWeekPicker: PropTypes.bool,
     showDateSelect: PropTypes.bool,
     showTimeSelect: PropTypes.bool,
     showTimeSelectOnly: PropTypes.bool,
@@ -552,6 +555,13 @@ export default class DatePicker extends React.Component {
       });
     }
     if (date || !event.target.value) {
+      if (this.props.showWeekPicker) {
+        date = getStartOfWeek(
+          date,
+          this.props.locale,
+          this.props.calendarStartDay,
+        );
+      }
       this.setSelected(date, event, true);
     }
   };
@@ -565,6 +575,13 @@ export default class DatePicker extends React.Component {
     if (this.props.onChangeRaw) {
       this.props.onChangeRaw(event);
     }
+    if (this.props.showWeekPicker) {
+      date = getStartOfWeek(
+        date,
+        this.props.locale,
+        this.props.calendarStartDay,
+      );
+    }
     this.setSelected(date, event, false, monthSelectedIn);
     if (this.props.showDateSelect) {
       this.setState({ isRenderAriaLiveMessage: true });
@@ -665,6 +682,13 @@ export default class DatePicker extends React.Component {
     const hasMaxDate = typeof this.props.maxDate !== "undefined";
     let isValidDateSelection = true;
     if (date) {
+      if (this.props.showWeekPicker) {
+        date = getStartOfWeek(
+          date,
+          this.props.locale,
+          this.props.calendarStartDay,
+        );
+      }
       const dateStartOfDay = startOfDay(date);
       if (hasMinDate && hasMaxDate) {
         // isDayinRange uses startOfDay internally, so not necessary to manipulate times here
@@ -748,16 +772,18 @@ export default class DatePicker extends React.Component {
       return;
     }
 
-    // if calendar is open, these keys will focus the selected day
+    // if calendar is open, these keys will focus the selected item
     if (this.state.open) {
       if (eventKey === "ArrowDown" || eventKey === "ArrowUp") {
         event.preventDefault();
-        const selectedDay =
+        const selectorString =
+          this.props.showWeekPicker && this.props.showWeekNumbers
+            ? '.react-datepicker__week-number[tabindex="0"]'
+            : '.react-datepicker__day[tabindex="0"]';
+        const selectedItem =
           this.calendar.componentNode &&
-          this.calendar.componentNode.querySelector(
-            '.react-datepicker__day[tabindex="0"]',
-          );
-        selectedDay && selectedDay.focus({ preventScroll: true });
+          this.calendar.componentNode.querySelector(selectorString);
+        selectedItem && selectedItem.focus({ preventScroll: true });
 
         return;
       }
@@ -828,10 +854,18 @@ export default class DatePicker extends React.Component {
       let newSelection;
       switch (eventKey) {
         case "ArrowLeft":
-          newSelection = subDays(copy, 1);
+          if (this.props.showWeekPicker) {
+            newSelection = subWeeks(copy, 1);
+          } else {
+            newSelection = subDays(copy, 1);
+          }
           break;
         case "ArrowRight":
-          newSelection = addDays(copy, 1);
+          if (this.props.showWeekPicker) {
+            newSelection = addWeeks(copy, 1);
+          } else {
+            newSelection = addDays(copy, 1);
+          }
           break;
         case "ArrowUp":
           newSelection = subWeeks(copy, 1);
@@ -851,6 +885,9 @@ export default class DatePicker extends React.Component {
         case "End":
           newSelection = addYears(copy, 1);
           break;
+        default:
+          newSelection = null;
+          break;
       }
       if (!newSelection) {
         if (this.props.onInputError) {
@@ -1047,6 +1084,7 @@ export default class DatePicker extends React.Component {
         showFourColumnMonthYearPicker={this.props.showFourColumnMonthYearPicker}
         showYearPicker={this.props.showYearPicker}
         showQuarterYearPicker={this.props.showQuarterYearPicker}
+        showWeekPicker={this.props.showWeekPicker}
         showPopperArrow={this.props.showPopperArrow}
         excludeScrollbar={this.props.excludeScrollbar}
         handleOnKeyDown={this.props.onKeyDown}

src/month.jsx

@@ -111,6 +111,7 @@ export default class Month extends React.Component {
     showTwoColumnMonthYearPicker: PropTypes.bool,
     showFourColumnMonthYearPicker: PropTypes.bool,
     showQuarterYearPicker: PropTypes.bool,
+    showWeekPicker: PropTypes.bool,
     handleOnKeyDown: PropTypes.func,
     isInputFocused: PropTypes.bool,
     weekAriaLabelPrefix: PropTypes.string,
@@ -330,6 +331,7 @@ export default class Month extends React.Component {
           selectsRange={this.props.selectsRange}
           selectsDisabledDaysInRange={this.props.selectsDisabledDaysInRange}
           showWeekNumber={this.props.showWeekNumbers}
+          showWeekPicker={this.props.showWeekPicker}
           startDate={this.props.startDate}
           endDate={this.props.endDate}
           dayClassName={this.props.dayClassName}
@@ -719,6 +721,7 @@ export default class Month extends React.Component {
       selectsEnd,
       showMonthYearPicker,
       showQuarterYearPicker,
+      showWeekPicker,
     } = this.props;
 
     return classnames(
@@ -729,6 +732,7 @@ export default class Month extends React.Component {
       },
       { "react-datepicker__monthPicker": showMonthYearPicker },
       { "react-datepicker__quarterPicker": showQuarterYearPicker },
+      { "react-datepicker__weekPicker": showWeekPicker },
     );
   };
 

src/stylesheets/datepicker.scss

@@ -368,22 +368,45 @@
   &.react-datepicker__week-number--clickable {
     cursor: pointer;
 
-    &:hover {
+    &:not(
+        .react-datepicker__week-number--selected,
+        .react-datepicker__week-number--keyboard-selected
+      ):hover {
       border-radius: $datepicker__border-radius;
       background-color: $datepicker__background-color;
     }
   }
-}
 
-.react-datepicker__day-names,
-.react-datepicker__week {
-  white-space: nowrap;
+  &--selected {
+    border-radius: $datepicker__border-radius;
+    background-color: $datepicker__selected-color;
+    color: #fff;
+
+    &:hover {
+      background-color: darken($datepicker__selected-color, 5%);
+    }
+  }
+
+  &--keyboard-selected {
+    border-radius: $datepicker__border-radius;
+    background-color: lighten($datepicker__selected-color, 10%);
+    color: #fff;
+
+    &:hover {
+      background-color: darken($datepicker__selected-color, 5%);
+    }
+  }
 }
 
 .react-datepicker__day-names {
+  white-space: nowrap;
   margin-bottom: -8px;
 }
 
+.react-datepicker__week {
+  white-space: nowrap;
+}
+
 .react-datepicker__day-name,
 .react-datepicker__day,
 .react-datepicker__time-name {