src/components/forms/DynamicForm.vue

@@ -52,19 +52,8 @@ const fieldHelp = (key) => {
 const stepErrors = reactive({});
 const formatErrors = reactive({});
 const phoneParts = reactive({});
-const dateParts = reactive({});
 const triedToProceed = ref(false);
 
-const months = [
-  "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
-  "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"
-];
-
-const years = (() => {
-  const y = new Date().getFullYear();
-  return Array.from({ length: 101 }, (_, i) => y - i);
-})();
-
 const remainingRequired = computed(() => {
   const step = config.value?.steps?.[currentStep.value];
   if (!step) return 0;
@@ -108,9 +97,6 @@ const fetchConfig = async () => {
       step.fields.forEach((field) => {
         if (field.type === "checkbox") {
           formData[field.key] = [];
-        } else if (field.type === "date") {
-          formData[field.key] = "";
-          dateParts[field.key] = { day: null, month: null, year: null };
         } else if (field.type === "phone_country") {
           formData[field.key] = "";
           phoneParts[field.key] = { code: "", number: "", flag: "" };
@@ -361,20 +347,6 @@ const handleSubmit = async () => {
 
 const getFieldError = (key) => stepErrors[key] || false;
 
-const composeDate = (key) => {
-  const parts = dateParts[key];
-  if (!parts) return;
-  const d = parts.day;
-  const m = parts.month;
-  const y = parts.year;
-  if (d && m && y) {
-    formData[key] = `${y}-${String(m).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
-  } else {
-    formData[key] = "";
-  }
-  stepErrors[key] = false;
-};
-
 const onPhoneInput = (key, event) => {
   const cleaned = event.target.value.replace(/\D/g, "");
   formData[key] = cleaned;
@@ -679,39 +651,19 @@ const getFieldInputType = (field) => {
                 />
               </label>
 
-              <div
+              <label
                 v-else-if="field.type === 'date'"
-                class="flex gap-2 w-full"
-                :class="{ 'input-error': getFieldError(field.key) }"
+                class="input w-full bg-white rounded-xl focus-within:outline-2 focus-within:outline-[#22523F]"
+                :class="{ 'input-error border-red-500 focus-within:outline-red-500': getFieldError(field.key) }"
               >
-                <select
-                  class="select select-bordered bg-white rounded-xl w-full focus:outline-2 focus:outline-[#22523F] text-[#1a1a1a]"
-                  :class="{ 'border-red-500 focus:outline-red-500': getFieldError(field.key) }"
-                  v-model="dateParts[field.key].day"
-                  @change="composeDate(field.key)"
-                >
-                  <option :value="null" disabled>Día</option>
-                  <option v-for="d in 31" :key="d" :value="d">{{ d }}</option>
-                </select>
-                <select
-                  class="select select-bordered bg-white rounded-xl w-full focus:outline-2 focus:outline-[#22523F] text-[#1a1a1a]"
-                  :class="{ 'border-red-500 focus:outline-red-500': getFieldError(field.key) }"
-                  v-model="dateParts[field.key].month"
-                  @change="composeDate(field.key)"
-                >
-                  <option :value="null" disabled>Mes</option>
-                  <option v-for="(m, i) in months" :key="i" :value="i + 1">{{ m }}</option>
-                </select>
-                <select
-                  class="select select-bordered bg-white rounded-xl w-full focus:outline-2 focus:outline-[#22523F] text-[#1a1a1a]"
-                  :class="{ 'border-red-500 focus:outline-red-500': getFieldError(field.key) }"
-                  v-model="dateParts[field.key].year"
-                  @change="composeDate(field.key)"
-                >
-                  <option :value="null" disabled>Año</option>
-                  <option v-for="y in years" :key="y" :value="y">{{ y }}</option>
-                </select>
-              </div>
+                <Icon icon="ph:calendar" class="shrink-0 opacity-50 text-gray-400 text-lg" />
+                <input
+                  class="grow text-[#1a1a1a]"
+                  type="date"
+                  v-model="formData[field.key]"
+                  @change="stepErrors[field.key] = false"
+                />
+              </label>
 
               <div v-else-if="field.type === 'select'" class="relative">
                 <label