How to combine different input values ( react, typescript)-CodePudding

I have three inputs. One is the input of getting html date. Second is the input that receives the first time in 24-hour format. (ex: HH:00) And the last is an input that receives mm in 24-hour format. (ex: 23:MM) For your information, the first input is getting a value called prop.editTodoAnswer.inception.

I have to combine all of these inputs into one and make the following output. "2022-12-01T00:00:00"

How can we express the value according to the format? Next is my code

 const inceptionValues = {
    date: props.editTodoAnswer.inception,
    fristTime: '00',
    secondeTime: '00',
  }
  
const [inceptionTest, setInceptionTest] = useState(inceptionValues);

 const handleChangeInception = (e: any) => {
    const newInception = e.target.value;
    setInceptionTest(newInception)
  }
  
--------------------------
  
  <form onChange={e => handleChangeInception(e)}>
      <input style={{margin:'0 5px 0 0'}} type="date" name="date" defaultValue={inceptionValues.date}/>
      <input style={{border:'none'}} type="number" name="fristTime" min="0" max="23" placeholder="23"/>:
      <input style={{border:'none'}} type="number" name="secondeTime" min="0" max="59" placeholder="00"/>
    </form>

CodePudding user response：

const dateString = `${props.editTodoAnswer.inception}T${inceptionValues.firstTime.padStart(2,'0')}:${inceptionValues.secondeTime.padStart(2,'0')}:00`

and i think props.editTodoAnswer.inception may not be in inceptionValues just use props.editTodoAnswer.inception

CodePudding user response：

It is not clear where you want the date string to be outputted... So I assumed you wished it in in the state.

There are three cases in order to build the string, depending on which input changed. Additionally, you have to add the leading zeros.

I suggest you to apply the change handler on each inputs instead of the form. This will allow each inputs to be updated with the state value at each render allowing the leading zeros to be shown.

Have a look at the comments throughout the code.

function CustomDate() {
  // Default state values
  const inceptionValues = {
    date: "2022-02-20",
    hours: "00",
    minutes: "00",
    dateString: "2022-02-20T00:00:00"
  };

  // State hook
  const [inceptionTest, setInceptionTest] = React.useState(inceptionValues);

  // Add the leading zeros when necessary
  const leadZero = (n) => {
    return parseInt(n) < 10 ? `0${n}` : n;
  };

  // Change handler for the 3 inputs
  // so e.target can be any of the 3 inputs
  const handleChangeInception = (e) => {
    let value = e.target.value;
    let newdateString;

    // Build the date string
    if (e.target.name === "date") {
      newdateString = `${value}T${inceptionTest.hours}:${inceptionTest.minutes}:00`;
    }
    if (e.target.name === "hours") {
      value = leadZero(value);
      newdateString = `${inceptionTest.date}T${value}:${inceptionTest.minutes}:00`;
    }
    if (e.target.name === "minutes") {
      value = leadZero(value);
      newdateString = `${inceptionTest.date}T${inceptionTest.hours}:${value}:00`;
    }

    // Prepare the object to set the new state
    let newState = {
      ...inceptionTest,
      [e.target.name]: value,
      dateString: newdateString
    };
    console.log(newState);

    setInceptionTest(newState);
  };

  // Render
  return (
    <form>
      <input
        style={{ margin: "0 5px 0 0" }}
        type="date"
        name="date"
        value={inceptionTest.date}
        onChange={(e) => handleChangeInception(e)}
      />
      <input
        style={{ border: "none" }}
        type="number"
        name="hours"
        min="0"
        max="23"
        placeholder="23"
        value={inceptionTest.hours}
        onChange={(e) => handleChangeInception(e)}
      />
      :
      <input
        style={{ border: "none" }}
        type="number"
        name="minutes"
        min="0"
        max="59"
        placeholder="00"
        value={inceptionTest.minutes}
        onChange={(e) => handleChangeInception(e)}
      />
    </form>
  );
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Custom date</h1>
        <CustomDate />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

<div id="root"></div>