Enhanced Date Picker - Copy this React, Tailwind Component to your project
in-this-icon-is-out-side-the-input-field-it-should-be-in-side-the-input-field-please-fix-it-without-effecting-any-other-functionality-<div-className="mb-4">-<label-className="block-text-gray-700-text-sm-font-bold-mb-2"-htmlFor="startDate"->-Start-Date-</label>-<div-className="relative">-<DatePicker-selected={formData.startDate}-onChange={date-=>-handleDateChange("startDate",-date)}-dateFormat="dd-MM-yyyy"-className={`w-full-pl-3-pr-10-py-2-text-gray-700-border-rounded-lg-focus:outline-none-${-errors.startDate-?-"border-red-500"-:-"focus:border-blue-500"-}`}-style={{-borderColor:-errors.startDate-?-"red"-:-"#B197FC",-width:-"100%",-}}-placeholderText="dd-mm-yyyy"-required-/>-<AiOutlineCalendar-className="absolute-right-3-top-1/2-transform--translate-y-1/2-text-gray-400-pointer-events-none"-/>-</div>-{errors.startDate-&&-(-<p-className="text-red-500-text-xs-italic">-{errors.startDate}-</p>-)}-</div>-<div-className="mb-4">-<label-className="block-text-gray-700-text-sm-font-bold-mb-2"-htmlFor="endDate"->-End-Date-</label>-<div-className="relative">-<DatePicker-selected={formData.endDate}-onChange={date-=>-handleDateChange("endDate",-date)}-dateFormat="dd-MM-yyyy"-className={`w-full-pl-3-pr-10-py-2-text-gray-700-border-rounded-lg-focus:outline-none-${-errors.endDate-?-"border-red-500"-:-"focus:border-blue-500"-}`}-style={{-borderColor:-errors.endDate-?-"red"-:-"#B197FC",-width:-"100%",-}}-placeholderText="dd-mm-yyyy"-required-/>-<AiOutlineCalendar-className="absolute-right-3-top-1/2-transform--translate-y-1/2-text-gray-400-pointer-events-none"-/>-</div>-{errors.endDate-&&-(-<p-className="text-red-500-text-xs-italic">-{errors.endDate}-</p>-)}-</div>
