Merge branch 'develop'

index.d.ts

@@ -595,6 +595,7 @@ declare module "react-multi-date-picker/plugins/time_picker" {
   interface TimePickerProps {
     position?: string;
     disabled?: boolean;
+    hideSeconds?: boolean;
   }
 
   export default function TimePicker(

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-multi-date-picker",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "a simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple and range pickers.",
   "main": "./build/index.js",
   "types": "index.d.ts",
@@ -55,11 +55,11 @@
     "@rollup/plugin-url": "^6.0.0",
     "@svgr/rollup": "^5.5.0",
     "@tabler/icons": "^1.41.2",
-    "postcss": "8.2.15",
+    "postcss": "8.3.0",
     "postcss-css-variables": "^0.18.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "rollup": "^2.48.0",
+    "rollup": "^2.49.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2"

plugins/all/analog_time_picker/analog_time_picker.js

@@ -16,6 +16,7 @@ export default function AnalogTimePicker({
   handleChange,
   position,
   calendarProps: { disableDayPicker },
+  hideSeconds,
 }) {
   let { date, selectedDate, multiple, range, focused } = state,
     availbleDate;
@@ -63,27 +64,38 @@ export default function AnalogTimePicker({
       <div className="rmdp-analog-clock">
         <div className="dot" />
         <div>
-          {array.map((name, index) => (
-            <div
-              key={index}
-              style={{ transform: getTransform(degree[name]) }}
-              className={`rmdp-${name}`}
-            />
-          ))}
+          {array.map((name, index) => {
+            if (name === "second" && hideSeconds) return null;
+
+            return (
+              <div
+                key={index}
+                style={{ transform: getTransform(degree[name]) }}
+                className={`rmdp-${name}`}
+              />
+            );
+          })}
         </div>
         <div>{numbers}</div>
         <div>{lines}</div>
       </div>
       <div className="rmdp-time-picker" style={{ marginBottom: "10px" }}>
-        {array.map((name, index) => (
-          <Button
-            key={index}
-            name={name}
-            value={getValue(name)}
-            update={update}
-            digits={date.digits}
-          />
-        ))}
+        {array.map((name, index) => {
+          if (name === "second") return null;
+
+          return (
+            <Button
+              key={index}
+              name={name}
+              value={getValue(name)}
+              update={update}
+              digits={date.digits}
+              hideDivider={
+                name === "second" || (name === "minute" && hideSeconds)
+              }
+            />
+          );
+        })}
       </div>
     </div>
   );
@@ -109,15 +121,15 @@ export default function AnalogTimePicker({
   }
 }
 
-function Button({ name, value, update, digits }) {
+function Button({ name, value, update, digits, hideDivider }) {
   return (
     <>
       <div>
         <Arrow direction="rmdp-up" onClick={() => update(name, value + 1)} />
         <Input value={value} onChange={update} digits={digits} name={name} />
         <Arrow direction="rmdp-down" onClick={() => update(name, value - 1)} />
       </div>
-      {name !== "second" && <span className="dvdr">:</span>}
+      {!hideDivider && <span className="dvdr">:</span>}
     </>
   );
 }

plugins/all/date_picker_header/date_picker_header.js

@@ -25,7 +25,7 @@ export default function DatePickerHeader({
     selectedDate = state.selectedDate;
   } else if (Array.isArray(state.selectedDate)) {
     selectedDate = state.focused || getLastItem(state.selectedDate);
-  } else if (!selectedDate) {
+  } else {
     selectedDate = new DateObject();
   }
 

plugins/all/time_picker/time_picker.js

@@ -10,6 +10,7 @@ export default function TimePicker({
   calendarProps: { formattingIgnoreList, disableDayPicker },
   nodes,
   Calendar,
+  hideSeconds,
 }) {
   let { date, selectedDate, multiple, range, focused } = state,
     meridiems = date.meridiems;
@@ -68,15 +69,22 @@ export default function TimePicker({
         ["padding" + padding]: padding ? "5px" : "0",
       }}
     >
-      {["hour", "minute", "second"].map((name, index) => (
-        <Button
-          key={index}
-          name={name}
-          value={getValue(name)}
-          update={update}
-          digits={date.digits}
-        />
-      ))}
+      {["hour", "minute", "second"].map((name, index) => {
+        if (name === "second" && hideSeconds) return null;
+
+        return (
+          <Button
+            key={index}
+            name={name}
+            value={getValue(name)}
+            update={update}
+            digits={date.digits}
+            hideDivider={
+              name === "second" || (name === "minute" && hideSeconds)
+            }
+          />
+        );
+      })}
       <div style={getStyle()}>
         <Arrow direction="rmdp-up" onClick={toggleMeridiem} />
         <div className="rmdp-am">
@@ -126,15 +134,15 @@ export default function TimePicker({
   }
 }
 
-function Button({ name, value, update, digits }) {
+function Button({ name, value, update, digits, hideDivider }) {
   return (
     <>
       <div>
         <Arrow direction="rmdp-up" onClick={() => update(name, value + 1)} />
         <Input value={value} onChange={update} digits={digits} name={name} />
         <Arrow direction="rmdp-down" onClick={() => update(name, value - 1)} />
       </div>
-      {name !== "second" && <span className="dvdr">:</span>}
+      {!hideDivider && <span className="dvdr">:</span>}
     </>
   );
 }

src/components/date_picker/date_picker.js

@@ -518,7 +518,7 @@ function DatePicker(
 
     if (input || !isVisible) {
       setIsVisible(true);
-    } else if (isVisible) {
+    } else {
       closeCalendar();
     }
   }

src/components/day_picker/day_picker.js

@@ -209,6 +209,8 @@ export default function DayPicker({
   }
 
   function getOtherProps(object) {
+    if (!object.current && !showOtherDays) return {};
+
     let otherProps = mapDays({
       date: object.date,
       today,
@@ -217,8 +219,7 @@ export default function DayPicker({
       isSameDate,
     });
 
-    if (!otherProps || otherProps.constructor !== Object) otherProps = {};
-
+    if (otherProps?.constructor !== Object) otherProps = {};
     if (otherProps.disabled || otherProps.hidden) object.disabled = true;
     if (otherProps.hidden) object.hidden = true;
 

website/src/components/demo/quick_access.js

@@ -249,6 +249,10 @@ const list = [
         name: "Only Time Picker Meridiem",
         path: "other-pickers/#only-time-picker-meridiem",
       },
+      {
+        name: "Hiding Seconds",
+        path: "other-pickers/#hiding-seconds",
+      },
       {
         name: "Only Month Picker",
         path: "other-pickers/#only-month-picker",
@@ -915,6 +919,10 @@ const list = [
             name: "Color & Background",
             path: "plugins/analog-time-picker/#color-&-background",
           },
+          {
+            name: "Hiding Seconds",
+            path: "plugins/analog-time-picker/#hiding-seconds",
+          },
           {
             name: "Position Bottom",
             path: "plugins/analog-time-picker/#position-bottom",