fixed DatePicker size issue

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -81,13 +81,13 @@ const ExpenseAnalysis = () => {
     <>
 
       <div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
-        <div className="text-start w-100">
+        <div className="text-start ">
           <h5 className="mb-1 card-title">Expense Breakdown</h5>
           {/* <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p> */}
           <p className="card-subtitle m-0">{projectName}</p>
         </div>
 
-        <div className="text-start text-sm-end w-75">
+        <div className="text-end text-sm-end ">
           <FormProvider {...methods}>
             <DateRangePicker1 />
           </FormProvider>

src/components/common/DatePicker.jsx

@@ -47,7 +47,7 @@ const DatePicker = ({
   const displayValue = value ? flatpickr.formatDate(new Date(value), "d-m-Y") : "";
 
   return (
-    <div className={`position-relative ${className}`}>
+    <div className={`position-relative ${className} w-max `}>
       <input
         type="text"
         className="form-control form-control-sm"

src/components/common/DateRangePicker.jsx

@@ -3,8 +3,8 @@ import { useController, useFormContext, useWatch } from "react-hook-form";
 import { useSelector } from "react-redux";
 
 const DateRangePicker = ({
-  md=12,
-  sm=6,
+  md,
+  sm,
   onRangeChange,
   DateDifference = 7,
   endDateMode = "yesterday",
@@ -33,7 +33,7 @@ const DateRangePicker = ({
       startDate.setHours(0, 0, 0, 0);
     }
 
-    const fp = flatpickr(inputRef.current, { 
+    const fp = flatpickr(inputRef.current, {
       mode: "range",
       dateFormat: "Y-m-d",
       altInput: true,
@@ -63,31 +63,27 @@ const DateRangePicker = ({
   };
 
   return (
-<div className={`position-relative w-auto justify-content-center`}>
-  <input
-    type="text"
-    className="form-control form-control-sm w-100 pe-8  " 
-    placeholder="From to End"
-    id="flatpickr-range"
-    ref={inputRef}
-  />
-
-  <i
-    className="bx bx-calendar calendar-icon cursor-pointer position-absolute ms-n6 top-50 end-30 translate-middle-y me-2 "
-    onClick={handleIconClick}
-  />
-</div>
-
+    <div className={`position-relative w-max   `}>
+      <input
+        type="text"
+        className="form-control form-control-sm ps-2 pe-3 me-2 cursor-pointer fw-medium"
+        placeholder="From to End"
+        id="flatpickr-range"
+        ref={inputRef}
+      />
 
+      <span
+        className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
+        onClick={handleIconClick}
+      >
+        <i className="bx bx-calendar bx-sm fs-5 text-muted"></i>
+      </span>
+    </div>
   );
 };
 
 export default DateRangePicker;
 
-
-
-
-
 export const DateRangePicker1 = ({
   startField = "startDate",
   endField = "endDate",
@@ -97,7 +93,6 @@ export const DateRangePicker1 = ({
   resetSignal,
   defaultRange = true,
   maxDate = null,
-  howManyDay = 6,
   ...rest
 }) => {
   const inputRef = useRef(null);
@@ -107,13 +102,12 @@ export const DateRangePicker1 = ({
     field: { ref },
   } = useController({ name: startField, control });
 
-  // Apply default range
   const applyDefaultDates = () => {
     const today = new Date();
-    const past = new Date(today.getTime());
-    past.setDate(today.getDate() - howManyDay);
+    const past = new Date();
+    past.setDate(today.getDate() - 6);
 
-    const format = (d) => window.flatpickr.formatDate(d, "d-m-Y");
+    const format = (d) => flatpickr.formatDate(d, "d-m-Y");
     const formattedStart = format(past);
     const formattedEnd = format(today);
 
@@ -128,11 +122,7 @@ export const DateRangePicker1 = ({
   useEffect(() => {
     if (!inputRef.current || inputRef.current._flatpickr) return;
 
-    if (defaultRange && !getValues(startField) && !getValues(endField)) {
-      applyDefaultDates();
-    }
-
-    const instance = window.flatpickr(inputRef.current, {
+    const instance = flatpickr(inputRef.current, {
       mode: "range",
       dateFormat: "d-m-Y",
       allowInput: allowText,
@@ -140,7 +130,7 @@ export const DateRangePicker1 = ({
       onChange: (selectedDates) => {
         if (selectedDates.length === 2) {
           const [start, end] = selectedDates;
-          const format = (d) => window.flatpickr.formatDate(d, "d-m-Y");
+          const format = (d) => flatpickr.formatDate(d, "d-m-Y");
           setValue(startField, format(start), { shouldValidate: true });
           setValue(endField, format(end), { shouldValidate: true });
         } else {
@@ -153,10 +143,12 @@ export const DateRangePicker1 = ({
 
     const currentStart = getValues(startField);
     const currentEnd = getValues(endField);
-    if (currentStart && currentEnd) {
+    if (defaultRange && !currentStart && !currentEnd) {
+      applyDefaultDates();
+    } else if (currentStart && currentEnd) {
       instance.setDate([
-        window.flatpickr.parseDate(currentStart, "d-m-Y"),
-        window.flatpickr.parseDate(currentEnd, "d-m-Y"),
+        flatpickr.parseDate(currentStart, "d-m-Y"),
+        flatpickr.parseDate(currentEnd, "d-m-Y"),
       ]);
     }
 
@@ -183,12 +175,12 @@ export const DateRangePicker1 = ({
   const formattedValue = start && end ? `${start} To ${end}` : "";
 
   return (
-    <div className={`position-relative ${className}`}>
+    <div className={`position-relative ${className} w-max   `}>
       <input
         type="text"
-        className="form-control form-control-sm"
+        className="form-control form-control-sm ps-2 pe-3 me-4 cursor-pointer"
         placeholder={placeholder}
-        value={formattedValue}
+        defaultValue={formattedValue}
         ref={(el) => {
           inputRef.current = el;
           ref(el);
@@ -205,4 +197,3 @@ export const DateRangePicker1 = ({
     </div>
   );
 };
-