A custom react time-picker component combining react-datetime & react-input-mask packages.

custom-time-picker.js

import React, { useState } from "react";
import Datetime from "react-datetime";
import InputMask from "react-input-mask";
import moment from "moment";

const CustomTimePicker = ({ label, classes, ...props }) => {
  const [selectedTime, setSelectedTime] = useState("00:00");
  const [formatChars] = useState({
    1: "[0-2]",
    2: "[0-9]",
    3: "[0-5]",
    4: "[0-9]",
    5: "[0-5]",
    6: "[0-9]",
  });

  const handleTimeChange = (dateString) => {
    if (dateString) {
      setSelectedTime(moment(dateString, "HH:mm"));
    } else {
      setSelectedTime(null);
    }
  };

  const beforeMaskedValueChange = (newState) => {
    const { value } = newState;
    // Conditional mask for the 2nd digit base on the first digit
    if (value.startsWith("2")) formatChars["2"] = "[0-3]";
    // To block 24, 25, etc.
    else formatChars["2"] = "[0-9]"; // To allow 05, 12, etc.
    return { value, selection: newState.selection };
  };

  const maskInput = (props) => {
    return (
      <>
        <InputMask
          className="field"
          mask="12:34"
          maskchar="0"
          formatChars={formatChars}
          beforeMaskedValueChange={beforeMaskedValueChange}
          {...props}
        />
      </>
    );
  };

  return (
    <div className={`field-group mb-0`}>
      <label htmlFor="" className={`field-label`}>
        {label}
      </label>

      <div className={`field-wrap icon-end kc-timepicker outlined`}>
        <Datetime
          value={selectedTime}
          open={true}
          dateFormat={false}
          timeFormat={"HH:mm"}
          renderInput={maskInput}
          inputProps={{
            className: `field ${classes?.input || ""}`,
          }}
          onChange={handleTimeChange}
        />
      </div>
    </div>
  );
};

export default CustomTimePicker;