@olenbetong/data-binding/src/timepicker.js

import React from "react";
import { useDataObject } from "./context";

function getTimeValueFromDate(date) {
  if (!date) return "";

  let hours = date.getHours();
  let minutes = date.getMinutes();

  hours = String(hours).padStart(2, "0");
  minutes = String(minutes).padStart(2, "0");

  return date ? hours + ":" + minutes : "";
}

function TimepickerBase({ className, field, ...rest }, ref) {
  const { currentRow, dataObject } = useDataObject();

  function updateField(evt) {
    let date = new Date(currentRow[field] || Date.now());
    let timePart = evt.target.value;

    if (timePart) {
      let [hours, minutes] = timePart.split(":");
      date.setHours(hours);
      date.setMinutes(minutes);

      dataObject.currentRow(field, date);
    } else {
      dataObject.currentRow(field, null);
    }
  }

  return (
    <input
      className={className}
      onChange={updateField}
      ref={ref}
      type="time"
      value={getTimeValueFromDate(currentRow[field])}
      {...rest}
    />
  );
}

export const Timepicker = React.forwardRef(TimepickerBase);