Material UI Textfield how to make it accept specific format?? (hh:mm:ss)

Issue

I'm trying to make my material ui textfield to accept the format of hh:mm:ss. What I mean is being able to change the numbers on hh mm and ss, while : are automatic. Any tips will be appreciated.

Solution

use an onchange and then don't allow non numerics and insert the colons

import{ useState } from "react";
import TextField from "@mui/material/TextField";

function App() {
  // TimeInput component defined inside App
  const TimeInput = () => {
    const [time, setTime] = useState("");

    const handleTimeChange = (e) => {
      let value = e.target.value;

      // Remove any non-numeric characters except colons
      value = value.replace(/[^0-9:]/g, "");

      // Auto-insert colons
      if (value.length === 2 || value.length === 5) {
        value += value.endsWith(":") ? "" : ":";
      }

      // Limit length to 8 characters (hh:mm:ss)
      value = value.slice(0, 8);

      setTime(value);
    };

    return (
      <TextField
        label="Time (hh:mm:ss)"
        value={time}
        onChange={handleTimeChange}
        placeholder="00:00:00"
      />
    );
  };

  return (
    <div className="App">
      <h1>Time Input Example</h1>
      <TimeInput />
    </div>
  );
}

export default App;

below is the link for it in code sandbox.

here it is in code sandbox https://codesandbox.io/p/sandbox/damp-https-lh845k?file=%2Fpackage.json%3A16%2C23&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cls1xhg060006356f5re6yhf8%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cls1xhg040002356frzeceszc%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cls1xhg050003356f0kdl67n3%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cls1xhg050005356fuuif2sh3%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cls1xhg040002356frzeceszc%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls1xhg040001356fzly6h3gt%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cls1xkm2i003e356f1s1jzas1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A1%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A132%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fcomponents%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cls1xzy270002356hex60iovp%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A16%252C%2522startColumn%2522%253A23%252C%2522endLineNumber%2522%253A16%252C%2522endColumn%2522%253A23%257D%255D%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cls1xhg040002356frzeceszc%2522%252C%2522activeTabId%2522%253A%2522cls1xzy270002356hex60iovp%2522%257D%252C%2522cls1xhg050005356fuuif2sh3%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls1xhg050004356f8fejylzu%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cls1xhg050005356fuuif2sh3%2522%252C%2522activeTabId%2522%253A%2522cls1xhg050004356f8fejylzu%2522%257D%252C%2522cls1xhg050003356f0kdl67n3%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cls1xhg050003356f0kdl67n3%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Answered By - Bryan Dellinger