fix: timepicker on 23 and 25-hour days

src/date_utils.js

@@ -818,3 +818,26 @@ export function getYearsPeriod(
   const startPeriod = endPeriod - (yearItemNumber - 1);
   return { startPeriod, endPeriod };
 }
+
+export function getHoursInDay(d) {
+  const startOfDay = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  const startOfTheNextDay = new Date(
+    d.getFullYear(),
+    d.getMonth(),
+    d.getDate(),
+    24
+  );
+
+  return Math.round((+startOfTheNextDay - +startOfDay) / 3_600_000);
+}
+
+export function startOfMinute(d) {
+  const seconds = d.getSeconds();
+  const milliseconds = d.getMilliseconds();
+
+  return toDate(d.getTime() - seconds * 1000 - milliseconds);
+}
+
+export function isSameMinute(d1, d2) {
+  return +startOfMinute(d1) === +startOfMinute(d2);
+}

src/index.jsx

@@ -686,10 +686,12 @@ export default class DatePicker extends React.Component {
     const selected = this.props.selected
       ? this.props.selected
       : this.getPreSelection();
-    let changedDate = setTime(selected, {
-      hour: getHours(time),
-      minute: getMinutes(time),
-    });
+    let changedDate = this.props.selected
+      ? time
+      : setTime(selected, {
+          hour: getHours(time),
+          minute: getMinutes(time),
+        });
 
     this.setState({
       preSelection: changedDate,

src/time.jsx

@@ -3,17 +3,15 @@ import PropTypes from "prop-types";
 import {
   getHours,
   getMinutes,
-  setHours,
-  setMinutes,
   newDate,
   getStartOfDay,
   addMinutes,
   formatDate,
-  isBefore,
-  isEqual,
   isTimeInDisabledRange,
   isTimeDisabled,
   timesToInjectAfter,
+  getHoursInDay,
+  isSameMinute,
 } from "./date_utils";
 
 export default class Time extends React.Component {
@@ -91,20 +89,16 @@ export default class Time extends React.Component {
     this.props.onChange(time);
   };
 
-  isSelectedTime = (time, currH, currM) =>
-    this.props.selected &&
-    currH === getHours(time) &&
-    currM === getMinutes(time);
+  isSelectedTime = (time) =>
+    this.props.selected && isSameMinute(this.props.selected, time);
 
-  liClasses = (time, currH, currM) => {
+  liClasses = (time) => {
     let classes = [
       "react-datepicker__time-list-item",
-      this.props.timeClassName
-        ? this.props.timeClassName(time, currH, currM)
-        : undefined,
+      this.props.timeClassName ? this.props.timeClassName(time) : undefined,
     ];
 
-    if (this.isSelectedTime(time, currH, currM)) {
+    if (this.isSelectedTime(time)) {
       classes.push("react-datepicker__time-list-item--selected");
     }
 
@@ -160,19 +154,18 @@ export default class Time extends React.Component {
     const format = this.props.format ? this.props.format : "p";
     const intervals = this.props.intervals;
 
-    const base = getStartOfDay(newDate(this.props.selected));
-    const multiplier = 1440 / intervals;
+    const activeDate =
+      this.props.selected || this.props.openToDate || newDate();
+
+    const base = getStartOfDay(activeDate);
     const sortedInjectTimes =
       this.props.injectTimes &&
       this.props.injectTimes.sort(function (a, b) {
         return a - b;
       });
 
-    const activeDate =
-      this.props.selected || this.props.openToDate || newDate();
-    const currH = getHours(activeDate);
-    const currM = getMinutes(activeDate);
-    const activeTime = setHours(setMinutes(base, currM), currH);
+    const minutesInDay = 60 * getHoursInDay(activeDate);
+    const multiplier = minutesInDay / intervals;
 
     for (let i = 0; i < multiplier; i++) {
       const currentTime = addMinutes(base, i * intervals);
@@ -190,34 +183,24 @@ export default class Time extends React.Component {
       }
     }
 
-    // Determine which time to focus and scroll into view when component mounts
-    const timeToFocus = times.reduce((prev, time) => {
-      if (isBefore(time, activeTime) || isEqual(time, activeTime)) {
-        return time;
-      } else {
-        return prev;
-      }
-    }, times[0]);
-
     return times.map((time, i) => {
+      const isActiveTime = isSameMinute(time, activeDate);
       return (
         <li
           key={i}
           onClick={this.handleClick.bind(this, time)}
-          className={this.liClasses(time, currH, currM)}
+          className={this.liClasses(time)}
           ref={(li) => {
-            if (time === timeToFocus) {
+            if (isActiveTime) {
               this.centerLi = li;
             }
           }}
           onKeyDown={(ev) => {
             this.handleOnKeyDown(ev, time);
           }}
-          tabIndex={time === timeToFocus ? "0" : "-1"}
+          tabIndex={isActiveTime ? 0 : -1}
           role="option"
-          aria-selected={
-            this.isSelectedTime(time, currH, currM) ? "true" : undefined
-          }
+          aria-selected={this.isSelectedTime(time) ? "true" : undefined}
         >
           {formatDate(time, format, this.props.locale)}
         </li>