import React, { useState } from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

// CSS Modules, react-datepicker-cssmodules.css
//import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const DatepickerhooksCss = () => {
    const [startDate, setStartDate] = useState(new Date());
    const handleCalendarClose = () => console.log("Calendar closed");
    const handleCalendarOpen = () => console.log("Calendar opened");

    return (
	<div>
	    <DatePicker
		closeOnScroll={true}
		selected={startDate}
		onChange={(date) => setStartDate(date)}
		onCalendarClose={handleCalendarClose}
		onCalendarOpen={handleCalendarOpen}>
		<div style={{ color: "red" }}>
		    Please select a day from the calendar!
		</div>
	    </DatePicker>
	    current date: {startDate.toString()}
	</div>
    );
};

export default DatepickerhooksCss;
