Solution

To get selected date from the date picker in React, you can use the onChange() attribute with the setState() method then you can easily get selected from datepicker.

To format a date you can read my below article, here I have explained multiple ways to format a date.

https://reactjssnippet.com/posts/how-to-display-date-in-react-js/

Snippet

In this snippet, we will see a short example to get the value of the input type date ( datepicker ).

const [date, setDate] = useState(new Date());

<input
  type="date"
  onChange={(e) => setDate(e.target.value)}
  value={date}
/>

Example

In this example, we will write a react js code to get the user selected date from datepicker and show it in the UI.

Let’s list down what we are going to do below example.

  • Create input type date ( datepicker )
  • Create a date state where we hold datepicker selected value.
  • Get user-selected value using the onChange() method
  • Show the Selected date in React UI
import React, { useState } from "react";

export default function App() {
  const [date, setDate] = useState("");

  return (
    <div className="App">
      <input
        type="date"
        onChange={(e) => setDate(e.target.value)}
        value={date}
      />

      <h3>Selected Date</h3>
      <p>{date}</p>
    </div>
  );
}

Output

selected, date

codesandbox