Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    You need to create a custom field component something like TimestampField using a Grid with three Input Components of prop type="number".

    <Grid container>
   <Grid item xs={2.4}>
      <TextField       
          type="number"
          value={ 01 }   
          onChange={ (e) => { // validate e.target.value here } }
     />
   </Grid>
   <Grid item xs={2.4}>
   :
   </Grid>
   <Grid item xs={2.4}>
       <TextField       
           type="number"
           value={ 01 }    
       />
   </Grid>
   <Grid item xs={2.4}>
   :
   </Grid>
   <Grid item xs={2.4}>
   <TextField       
       type="number"
       value={ 01 }    
   />
   </Grid>
</Grid>

    Simple but the idea is correct, a different way of thinking.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search