From a9b85d39965ad9353a13f8ed7a9889a959073b4b Mon Sep 17 00:00:00 2001
From: "mergify[bot]" <37929162+mergify[bot]@users.noreply.github.com>
Date: Wed, 30 Oct 2024 18:43:32 +0530
Subject: [PATCH] fix(PWA): replace datepicker with input component (backport
 #2366) (#2368)

Co-authored-by: Rucha Mahabal <ruchamahabal2@gmail.com>
---
 frontend/src/components/FormField.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/FormField.vue b/frontend/src/components/FormField.vue
index ac46cf99c6..0655a44055 100644
--- a/frontend/src/components/FormField.vue
+++ b/frontend/src/components/FormField.vue
@@ -108,13 +108,15 @@
 		</div>
 
 		<!-- Date -->
-		<!-- FIXME: min date, max date doesn't work -->
-		<DatePicker
+		<!-- FIXME: default datepicker has poor UI -->
+		<Input
 			v-else-if="props.fieldtype === 'Date'"
+			type="date"
 			:value="modelValue"
 			:placeholder="__('Select {0}', [props.label])"
-			:formatter="(val) => dayjs(val).format('DD-MM-YYYY')"
-			@update:modelValue="(v) => emit('update:modelValue', v)"
+			:formatValue="(val) => dayjs(val).format('DD-MM-YYYY')"
+			@input="(v) => emit('update:modelValue', v)"
+			@change="(v) => emit('change', v)"
 			v-bind="$attrs"
 			:disabled="isReadOnly"
 			:min="props.minDate"
@@ -138,7 +140,7 @@
 </template>
 
 <script setup>
-import { Autocomplete, DatePicker, DateTimePicker, ErrorMessage } from "frappe-ui"
+import { Autocomplete, DateTimePicker, ErrorMessage, Input } from "frappe-ui"
 import { computed, onMounted, inject } from "vue"
 
 import Link from "@/components/Link.vue"