Simple React Datepicker

• Out of the box date picker
• using package: react-datepicker

Prerequisites

• add necessary imports and default styling

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

• Create default state:

const [expenseDate, setExpenseDate] = useState(new Date());

Code

            <div className="form-group mb-6">
              <label htmlFor="type" className="form-label inline-block mb-2 text-gray-700">
                {category} Date
              </label>
              <br />
              <DatePicker
                dateFormat="MMM dd, yyyy"
                className="pl-4 text-gray-500 border-solid border-2 border-gray-200 rounded-lg p-2"
                selected={expenseDate}
                onChange={setExpenseDate}
                popperPlacement="bottom-end"
              />
            </div>