React Datepicker Not showing correctly

Question

I am creating an appliscation using React datepicker but it not displayed correctly even when i copy paste from their example

<DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      timeCaption="time"
      dateFormat="dd-MM-yyyy HH:mm"
    />

in my apps seems like this

What's possibly wrong?

Answer 1

Using functional component

import React, { useState } from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const App = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      timeCaption="time"
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

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

Using class based component

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

class App extends React.Component {
  state = {
    startDate: new Date()
  };
  setStartDate = picked => {
    this.setState({ startDate: picked });
  };
  render() {
    //const [startDate, setStartDate] = useState(new Date());
    return (
      <DatePicker
        selected={this.state.startDate}
        onChange={date => this.setStartDate(date)}
        showTimeSelect
        timeFormat="HH:mm"
        timeIntervals={15}
        timeCaption="time"
        dateFormat="MMMM d, yyyy h:mm aa"
      />
    );
  }
}

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

you can see example for your reference.

Date picker example