diff --git a/cypress/e2e/patient_spec/patient_registration.cy.ts b/cypress/e2e/patient_spec/patient_registration.cy.ts
index 8ec3b3981b7..70276e9641d 100644
--- a/cypress/e2e/patient_spec/patient_registration.cy.ts
+++ b/cypress/e2e/patient_spec/patient_registration.cy.ts
@@ -19,13 +19,11 @@ const getRelativeDateString = (deltaDays = 0) => {
   if (deltaDays) {
     date.setDate(date.getDate() + deltaDays);
   }
-  return date
-    .toLocaleDateString("en-IN", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-    })
-    .replace("/", "");
+  return date.toLocaleDateString("en-IN", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
 };
 
 describe("Patient Creation with consultation", () => {
diff --git a/cypress/e2e/users_spec/user_creation.cy.ts b/cypress/e2e/users_spec/user_creation.cy.ts
index e2708c7a5a2..2fccf4fae87 100644
--- a/cypress/e2e/users_spec/user_creation.cy.ts
+++ b/cypress/e2e/users_spec/user_creation.cy.ts
@@ -146,7 +146,7 @@ describe("User Creation", () => {
     userCreationPage.typeIntoElementById("password", "Test@123");
     userCreationPage.selectHomeFacility("Dummy Shifting Center");
     userCreationPage.typeIntoElementById("phone_number", phone_number);
-    userCreationPage.setInputDate("date_of_birth", "date-input", "25081999");
+    userCreationPage.setInputDate("date_of_birth", "date-input", "25/08/1999");
     userCreationPage.selectDropdownOption("user_type", "Doctor");
     userCreationPage.typeIntoElementById("c_password", "Test@123");
     userCreationPage.typeIntoElementById("doctor_qualification", "MBBS");
diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
index 1a2d9333038..f2cd8f8d9f3 100644
--- a/src/Components/Common/DateInputV2.tsx
+++ b/src/Components/Common/DateInputV2.tsx
@@ -335,22 +335,22 @@ const DateInputV2: React.FC<Props> = ({
                     />
                   </div>
                 </PopoverButton>
-                <PopoverPanel
-                  static
-                  className={classNames(
-                    `cui-dropdown-base absolute my-0.5 ${time ? "w-full md:w-[400px]" : "w-72"} ${open ? "flex" : "hidden"} divide-y-0 rounded p-4`,
-                    getPosition(),
-                  )}
-                >
-                  <div
+                {open && (
+                  <PopoverPanel
+                    static
                     className={classNames(
-                      "flex w-full items-center justify-between gap-y-4",
-                      position?.includes("TOP")
-                        ? "flex-col-reverse"
-                        : "flex-col",
+                      `cui-dropdown-base absolute my-0.5 ${time ? "w-full md:w-[400px]" : "w-72"} divide-y-0 rounded p-4`,
+                      getPosition(),
                     )}
                   >
-                    {open && (
+                    <div
+                      className={classNames(
+                        "flex w-full items-center justify-between gap-y-4",
+                        position?.includes("TOP")
+                          ? "flex-col-reverse"
+                          : "flex-col",
+                      )}
+                    >
                       <input
                         id="date-input"
                         className="cui-input-base bg-secondary-50"
@@ -378,295 +378,299 @@ const DateInputV2: React.FC<Props> = ({
                         }}
                         onBlur={() => setEditingText(null)}
                       />
-                    )}
-                    <div className="flex flex-row items-stretch gap-4">
-                      <div className="flex w-full flex-col items-center justify-between">
-                        <div className="flex">
-                          <button
-                            type="button"
-                            disabled={
-                              !isDateWithinConstraints(
-                                getLastDay(),
-                                datePickerHeaderDate.getMonth() - 1,
-                              )
-                            }
-                            className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
-                            onClick={decrement}
-                            data-test-id="decrement-date-range"
-                          >
-                            <CareIcon
-                              icon="l-angle-left-b"
-                              className="text-lg"
-                            />
-                          </button>
-
-                          <div className="flex items-center justify-center text-sm">
-                            {type === "date" && (
+                      <div className="flex flex-row items-stretch gap-4">
+                        <div className="flex w-full flex-col items-center justify-between">
+                          <div className="flex">
+                            <button
+                              type="button"
+                              disabled={
+                                !isDateWithinConstraints(
+                                  getLastDay(),
+                                  datePickerHeaderDate.getMonth() - 1,
+                                )
+                              }
+                              className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
+                              onClick={decrement}
+                              data-test-id="decrement-date-range"
+                            >
+                              <CareIcon
+                                icon="l-angle-left-b"
+                                className="text-lg"
+                              />
+                            </button>
+
+                            <div className="flex items-center justify-center text-sm">
+                              {type === "date" && (
+                                <div
+                                  onClick={showMonthPicker}
+                                  className="cursor-pointer rounded px-3 py-1 text-center font-medium text-black hover:bg-secondary-300"
+                                >
+                                  {dayjs(datePickerHeaderDate).format("MMMM")}
+                                </div>
+                              )}
                               <div
-                                onClick={showMonthPicker}
-                                className="cursor-pointer rounded px-3 py-1 text-center font-medium text-black hover:bg-secondary-300"
+                                onClick={showYearPicker}
+                                className="cursor-pointer rounded px-3 py-1 font-medium text-black hover:bg-secondary-300"
                               >
-                                {dayjs(datePickerHeaderDate).format("MMMM")}
+                                <p className="text-center">
+                                  {type == "year"
+                                    ? year.getFullYear()
+                                    : dayjs(datePickerHeaderDate).format(
+                                        "YYYY",
+                                      )}
+                                </p>
                               </div>
-                            )}
-                            <div
-                              onClick={showYearPicker}
-                              className="cursor-pointer rounded px-3 py-1 font-medium text-black hover:bg-secondary-300"
-                            >
-                              <p className="text-center">
-                                {type == "year"
-                                  ? year.getFullYear()
-                                  : dayjs(datePickerHeaderDate).format("YYYY")}
-                              </p>
                             </div>
+                            <button
+                              type="button"
+                              disabled={
+                                (type === "year" &&
+                                  new Date().getFullYear() ===
+                                    year.getFullYear()) ||
+                                !isDateWithinConstraints(getLastDay())
+                              }
+                              className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
+                              onClick={increment}
+                              data-test-id="increment-date-range"
+                            >
+                              <CareIcon
+                                icon="l-angle-right-b"
+                                className="text-lg"
+                              />
+                            </button>
                           </div>
-                          <button
-                            type="button"
-                            disabled={
-                              (type === "year" &&
-                                new Date().getFullYear() ===
-                                  year.getFullYear()) ||
-                              !isDateWithinConstraints(getLastDay())
-                            }
-                            className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
-                            onClick={increment}
-                            data-test-id="increment-date-range"
-                          >
-                            <CareIcon
-                              icon="l-angle-right-b"
-                              className="text-lg"
-                            />
-                          </button>
-                        </div>
 
-                        {type === "date" && (
-                          <>
-                            <div className="flex w-full flex-wrap">
-                              {DAYS.map((day, i) => (
-                                <div
-                                  key={day}
-                                  id={`day-${i}`}
-                                  className="aspect-square w-[14.26%]"
-                                >
-                                  <div className="text-center text-sm font-medium text-secondary-800">
-                                    {day}
+                          {type === "date" && (
+                            <>
+                              <div className="flex w-full flex-wrap">
+                                {DAYS.map((day, i) => (
+                                  <div
+                                    key={day}
+                                    id={`day-${i}`}
+                                    className="aspect-square w-[14.26%]"
+                                  >
+                                    <div className="text-center text-sm font-medium text-secondary-800">
+                                      {day}
+                                    </div>
                                   </div>
-                                </div>
-                              ))}
-                            </div>
-                            <div className="flex flex-wrap">
-                              {blankDays.map((_, i) => (
-                                <div
-                                  key={i}
-                                  className="aspect-square w-[14.26%] border border-transparent p-1 text-center text-sm"
-                                />
-                              ))}
-                              {dayCount.map((d, i) => {
-                                const withinConstraints =
-                                  isDateWithinConstraints(d);
-                                let selected;
-                                if (value) {
-                                  const newDate = new Date(
-                                    datePickerHeaderDate,
-                                  );
-                                  newDate.setDate(d);
-                                  selected =
-                                    value.toDateString() ===
-                                    newDate.toDateString();
-                                }
-
-                                const baseClasses =
-                                  "flex h-full items-center justify-center rounded text-center text-sm leading-loose transition duration-100 ease-in-out";
-                                let conditionalClasses = "";
-
-                                if (withinConstraints) {
-                                  if (selected) {
-                                    conditionalClasses =
-                                      "bg-primary-500 font-bold text-white";
+                                ))}
+                              </div>
+                              <div className="flex flex-wrap">
+                                {blankDays.map((_, i) => (
+                                  <div
+                                    key={i}
+                                    className="aspect-square w-[14.26%] border border-transparent p-1 text-center text-sm"
+                                  />
+                                ))}
+                                {dayCount.map((d, i) => {
+                                  const withinConstraints =
+                                    isDateWithinConstraints(d);
+                                  let selected;
+                                  if (value) {
+                                    const newDate = new Date(
+                                      datePickerHeaderDate,
+                                    );
+                                    newDate.setDate(d);
+                                    selected =
+                                      value.toDateString() ===
+                                      newDate.toDateString();
+                                  }
+
+                                  const baseClasses =
+                                    "flex h-full items-center justify-center rounded text-center text-sm leading-loose transition duration-100 ease-in-out";
+                                  let conditionalClasses = "";
+
+                                  if (withinConstraints) {
+                                    if (selected) {
+                                      conditionalClasses =
+                                        "bg-primary-500 font-bold text-white";
+                                    } else {
+                                      conditionalClasses =
+                                        "hover:bg-secondary-300 cursor-pointer";
+                                    }
                                   } else {
                                     conditionalClasses =
-                                      "hover:bg-secondary-300 cursor-pointer";
+                                      "!cursor-not-allowed !text-secondary-400";
                                   }
-                                } else {
-                                  conditionalClasses =
-                                    "!cursor-not-allowed !text-secondary-400";
-                                }
-                                return (
-                                  <div
-                                    key={i}
-                                    id={`date-${d}`}
-                                    className="aspect-square w-[14.26%]"
-                                  >
-                                    <button
-                                      onClick={setDateValue(d, close)}
-                                      type="button"
-                                      className={`${baseClasses} ${conditionalClasses} block w-full`}
+                                  return (
+                                    <div
+                                      key={i}
+                                      id={`date-${d}`}
+                                      className="aspect-square w-[14.26%]"
                                     >
-                                      {d}
-                                    </button>
-                                  </div>
-                                );
-                              })}
-                            </div>
-                          </>
-                        )}
-                        {type === "month" && (
-                          <div className="flex flex-wrap">
-                            {Array(12)
-                              .fill(null)
-                              .map((_, i) => (
-                                <div
-                                  key={i}
-                                  id={`month-${i}`}
-                                  className={classNames(
-                                    "w-1/4 cursor-pointer rounded-lg px-2 py-4 text-center text-sm font-semibold",
-                                    value && isSelectedMonth(i)
-                                      ? "bg-primary-500 text-white"
-                                      : "text-secondary-700 hover:bg-secondary-300",
-                                  )}
-                                  onClick={setMonthValue(i)}
-                                >
-                                  {dayjs(
-                                    new Date(
-                                      datePickerHeaderDate.getFullYear(),
-                                      i,
-                                      1,
-                                    ),
-                                  ).format("MMM")}
-                                </div>
-                              ))}
-                          </div>
-                        )}
-                        {type === "year" && (
-                          <div className="flex flex-wrap">
-                            {Array(12)
-                              .fill(null)
-                              .map((_, i) => {
-                                const y = year.getFullYear() - 11 + i;
-                                return (
+                                      <button
+                                        onClick={setDateValue(d, close)}
+                                        type="button"
+                                        className={`${baseClasses} ${conditionalClasses} block w-full`}
+                                      >
+                                        {d}
+                                      </button>
+                                    </div>
+                                  );
+                                })}
+                              </div>
+                            </>
+                          )}
+                          {type === "month" && (
+                            <div className="flex flex-wrap">
+                              {Array(12)
+                                .fill(null)
+                                .map((_, i) => (
                                   <div
                                     key={i}
-                                    id={`year-${i}`}
+                                    id={`month-${i}`}
                                     className={classNames(
                                       "w-1/4 cursor-pointer rounded-lg px-2 py-4 text-center text-sm font-semibold",
-                                      value && isSelectedYear(y)
+                                      value && isSelectedMonth(i)
                                         ? "bg-primary-500 text-white"
                                         : "text-secondary-700 hover:bg-secondary-300",
                                     )}
-                                    onClick={setYearValue(y)}
+                                    onClick={setMonthValue(i)}
                                   >
-                                    {y}
+                                    {dayjs(
+                                      new Date(
+                                        datePickerHeaderDate.getFullYear(),
+                                        i,
+                                        1,
+                                      ),
+                                    ).format("MMM")}
                                   </div>
-                                );
-                              })}
-                          </div>
-                        )}
-                      </div>
-                      {time && (
-                        <div className="flex shrink-0 gap-1">
-                          {(
-                            [
-                              {
-                                name: "Hours",
-                                value: hours,
-                                options: Array.from(
-                                  { length: 12 },
-                                  (_, i) => i + 1,
-                                ),
-                                onChange: (val: any) => {
-                                  handleTimeChange({
-                                    newHours: val,
-                                  });
+                                ))}
+                            </div>
+                          )}
+                          {type === "year" && (
+                            <div className="flex flex-wrap">
+                              {Array(12)
+                                .fill(null)
+                                .map((_, i) => {
+                                  const y = year.getFullYear() - 11 + i;
+                                  return (
+                                    <div
+                                      key={i}
+                                      id={`year-${i}`}
+                                      className={classNames(
+                                        "w-1/4 cursor-pointer rounded-lg px-2 py-4 text-center text-sm font-semibold",
+                                        value && isSelectedYear(y)
+                                          ? "bg-primary-500 text-white"
+                                          : "text-secondary-700 hover:bg-secondary-300",
+                                      )}
+                                      onClick={setYearValue(y)}
+                                    >
+                                      {y}
+                                    </div>
+                                  );
+                                })}
+                            </div>
+                          )}
+                        </div>
+                        {time && (
+                          <div className="flex shrink-0 gap-1">
+                            {(
+                              [
+                                {
+                                  name: "Hours",
+                                  value: hours,
+                                  options: Array.from(
+                                    { length: 12 },
+                                    (_, i) => i + 1,
+                                  ),
+                                  onChange: (val: any) => {
+                                    handleTimeChange({
+                                      newHours: val,
+                                    });
+                                  },
+                                  ref: hourScrollerRef,
                                 },
-                                ref: hourScrollerRef,
-                              },
-                              {
-                                name: "Minutes",
-                                value: minutes,
-                                options: Array.from(
-                                  { length: 60 },
-                                  (_, i) => i,
-                                ),
-                                onChange: (val: any) => {
-                                  handleTimeChange({
-                                    newMinutes: val,
-                                  });
+                                {
+                                  name: "Minutes",
+                                  value: minutes,
+                                  options: Array.from(
+                                    { length: 60 },
+                                    (_, i) => i,
+                                  ),
+                                  onChange: (val: any) => {
+                                    handleTimeChange({
+                                      newMinutes: val,
+                                    });
+                                  },
+                                  ref: minuteScrollerRef,
                                 },
-                                ref: minuteScrollerRef,
-                              },
-                              {
-                                name: "am/pm",
-                                value: ampm,
-                                options: ["AM", "PM"],
-                                onChange: (val: any) => {
-                                  handleTimeChange({
-                                    newAmpm: val,
-                                  });
+                                {
+                                  name: "am/pm",
+                                  value: ampm,
+                                  options: ["AM", "PM"],
+                                  onChange: (val: any) => {
+                                    handleTimeChange({
+                                      newAmpm: val,
+                                    });
+                                  },
+                                  ref: undefined,
                                 },
-                                ref: undefined,
-                              },
-                            ] as const
-                          ).map((input, i) => (
-                            <div
-                              key={i}
-                              className="scrollbar-hide flex h-[237px] shrink-0 flex-col gap-1 overflow-auto"
-                              ref={input.ref}
-                              onScroll={(e) => {
-                                const optionsHeight =
-                                  e.currentTarget.scrollHeight / 3;
-                                const scrollTop = e.currentTarget.scrollTop;
-                                const containerHeight =
-                                  e.currentTarget.clientHeight;
-                                if (scrollTop >= optionsHeight * 2) {
-                                  e.currentTarget.scrollTo({
-                                    top: optionsHeight,
-                                  });
-                                }
-                                if (
-                                  scrollTop + containerHeight <=
-                                  optionsHeight
-                                ) {
-                                  e.currentTarget.scrollTo({
-                                    top: optionsHeight + scrollTop,
-                                  });
-                                }
-                              }}
-                            >
-                              {[
-                                ...input.options,
-                                ...(input.name === "am/pm"
-                                  ? []
-                                  : input.options),
-                                ...(input.name === "am/pm"
-                                  ? []
-                                  : input.options),
-                              ].map((option, j) => (
-                                <button
-                                  type="button"
-                                  key={j}
-                                  className={`flex aspect-square w-9 shrink-0 items-center justify-center rounded-md border transition-all ${(input.name === "Hours" && option === 12 ? [0, 12].includes(input.value) : input.value === option) ? "bg-primary-500 font-bold text-white" : "border-gray-300 hover:bg-secondary-300"} text-sm`}
-                                  onClick={() => input.onChange(option as any)}
-                                  data-selected={
-                                    (input.name === "Hours" && option === 12
-                                      ? [0, 12].includes(input.value)
-                                      : input.value === option) &&
-                                    j + 1 >= input.options.length &&
-                                    j + 1 <= input.options.length * 2
+                              ] as const
+                            ).map((input, i) => (
+                              <div
+                                key={i}
+                                className="scrollbar-hide flex h-[237px] shrink-0 flex-col gap-1 overflow-auto"
+                                ref={input.ref}
+                                onScroll={(e) => {
+                                  const optionsHeight =
+                                    e.currentTarget.scrollHeight / 3;
+                                  const scrollTop = e.currentTarget.scrollTop;
+                                  const containerHeight =
+                                    e.currentTarget.clientHeight;
+                                  if (scrollTop >= optionsHeight * 2) {
+                                    e.currentTarget.scrollTo({
+                                      top: optionsHeight,
+                                    });
                                   }
-                                >
-                                  {option.toLocaleString("en-US", {
-                                    minimumIntegerDigits: 2,
-                                    useGrouping: false,
-                                  })}
-                                </button>
-                              ))}
-                            </div>
-                          ))}
-                        </div>
-                      )}
+                                  if (
+                                    scrollTop + containerHeight <=
+                                    optionsHeight
+                                  ) {
+                                    e.currentTarget.scrollTo({
+                                      top: optionsHeight + scrollTop,
+                                    });
+                                  }
+                                }}
+                              >
+                                {[
+                                  ...input.options,
+                                  ...(input.name === "am/pm"
+                                    ? []
+                                    : input.options),
+                                  ...(input.name === "am/pm"
+                                    ? []
+                                    : input.options),
+                                ].map((option, j) => (
+                                  <button
+                                    type="button"
+                                    key={j}
+                                    className={`flex aspect-square w-9 shrink-0 items-center justify-center rounded-md border transition-all ${(input.name === "Hours" && option === 12 ? [0, 12].includes(input.value) : input.value === option) ? "bg-primary-500 font-bold text-white" : "border-gray-300 hover:bg-secondary-300"} text-sm`}
+                                    onClick={() =>
+                                      input.onChange(option as any)
+                                    }
+                                    data-selected={
+                                      (input.name === "Hours" && option === 12
+                                        ? [0, 12].includes(input.value)
+                                        : input.value === option) &&
+                                      j + 1 >= input.options.length &&
+                                      j + 1 <= input.options.length * 2
+                                    }
+                                  >
+                                    {option.toLocaleString("en-US", {
+                                      minimumIntegerDigits: 2,
+                                      useGrouping: false,
+                                    })}
+                                  </button>
+                                ))}
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                </PopoverPanel>
+                  </PopoverPanel>
+                )}
               </div>
             );
           }}