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>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
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>