The time " T22:00:00.000Z" is rendered next to the date

user_15873475 0
Viewed 114

I could not find how to remove the "T22:00:00.000Z" which is rendered with date. I am using this input:

<input
            type="date"
            required
            id="release_date"
            ref={release_dateInputRef}
          />

And i have no clue why the date is rendered like this: " 2001-06-29T22:00:00.000Z ". Does anyone know how to render only the date: 2001-06-29?

reactjs
1 Answers

You can create a function to display only date

export default function App() {
  const [date, setDate] = useState("");
  const release_dateInputRef = useRef(null);
 // function to show only date
  const getDate = (date) => {
    if (date) {
      const d = new Date(date);
      return `${d?.getFullYear()}-${d?.getMonth()}-${d?.getDate()}`;
    }
    return undefined;
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input
        type="date"
        required
        id="release_date"
        ref={release_dateInputRef}
        onChange={(e) => setDate(e.target.value)}
      />
      <br />
      Selected Date: {date}
      <br />
      Selected Date from ref :{getDate(release_dateInputRef?.current?.value)}
      <br />
      Selected Date: {getDate(date)}
    </div>
  );
}

Output:

enter image description here

Sample code - CodeSandbox link - https://codesandbox.io/s/nice-black-w3j0u?file=/src/App.js

Let me know if you need further support.

user_78499220
Related