Last active
May 27, 2024 13:49
-
-
Save Gaurav8757/57d3b4356127c1e05c76c1875cf977b3 to your computer and use it in GitHub Desktop.
YYYY-MM-DD to DD-MM-YYYY
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState } from 'react'; | |
| function AddTerminator() { | |
| const [terminatedate, setTerminateDate] = useState(""); | |
| const [dateInput, setDateInput] = useState(""); | |
| const convertDateFormat = (dateStr) => { | |
| const [year, month, day] = dateStr.split('-'); | |
| return `${day}-${month}-${year}`; | |
| }; | |
| const handleInputChange = (event) => { | |
| const input = event.target.value; | |
| if (/^\d{4}-\d{2}-\d{2}$/.test(input)) { | |
| const formattedDate = convertDateFormat(input); | |
| setTerminateDate(formattedDate); | |
| } else { | |
| setTerminateDate(''); // Clear the converted date if the format is invalid | |
| } | |
| setDateInput(input); | |
| }; | |
| return ( | |
| <div> | |
| <input | |
| className="input-style p-1 text-base rounded-lg" | |
| type="date" | |
| value={dateInput} | |
| placeholder="dd-mm-yyyy" | |
| onChange={handleInputChange} | |
| /> | |
| {terminatedate && <p>Formatted Date: {terminatedate}</p>} | |
| </div> | |
| ); | |
| } | |
| export default AddTerminator; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment