diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index 0004ca486..6a078e9a9 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -340,6 +340,13 @@ function changeFormData() {
   isSave.value = props.data != null ?? true;
 }
 
+function inputEdit(val:boolean){
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
 onMounted(() => {
   mainStore.rowsAdd = [];
   getListChannel();
@@ -624,10 +631,9 @@ onMounted(() => {
                         ref="dateReceivedRef"
                         outlined
                         dense
-                        :input-style="isReadonly ? { color: 'black' }:{color:'teal'}"
+                        :class="inputEdit(isReadonly)"
                         :readonly="isReadonly"
                         hide-bottom-space
-                        class="full-width datepicker"
                         :model-value="
                           formData.dateReceived != null
                             ? date2Thai(formData.dateReceived)
@@ -701,9 +707,8 @@ onMounted(() => {
                         for="inputDateconsideration"
                         ref="dateConsiderationRef"
                         outlined
-                        :input-style="isReadonly ? { color: 'black' }:{color:'teal'}"
+                        :class="inputEdit(isReadonly)"
                         dense
-                        class="full-width datepicker"
                         :model-value="
                           formData.dateConsideration != null
                             ? date2Thai(formData.dateConsideration)
@@ -774,11 +779,10 @@ onMounted(() => {
                         for="inputDatewarn"
                         ref="dateNotificationRef"
                         outlined
-                        :input-style="isReadonly ? { color: 'black' }:{color:'teal'}"
+                        :class="inputEdit(isReadonly)"
                         dense
                         :readonly="isReadonly"
                         hide-bottom-space
-                        class="full-width datepicker"
                         :model-value="
                           formData.dateNotification != null
                             ? date2Thai(formData.dateNotification)
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index 880fa2d8a..8fd204c67 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -487,6 +487,19 @@ function calendarOpen() {
   calendarModal.value = true;
 }
 
+function inputEdit(val: boolean) {
+  if (formData.investigationExtendHistory.length > 0) {
+    return {
+      "full-width cursor-pointer ": val,
+    };
+  } else {
+    return {
+      "full-width cursor-pointer ": val,
+      "full-width cursor-pointer inputgreen": !val,
+    };
+  }
+}
+
 onMounted(async () => {
   mainStore.rowsAdd = [];
   getOc();
@@ -854,15 +867,8 @@ onMounted(async () => {
                               <template #trigger>
                                 <q-input
                                   for="#date"
-                                  class="full-width cursor-pointer"
+                                  :class="inputEdit(isReadonly)"
                                   ref="dateRef"
-                                  :input-style="
-                                    isReadonly ||
-                                    formData.investigationExtendHistory.length >
-                                      0
-                                      ? { color: 'black' }
-                                      : { color: 'teal' }
-                                  "
                                   :readonly="
                                     isReadonly ||
                                     formData.investigationExtendHistory.length >
@@ -876,7 +882,7 @@ onMounted(async () => {
                                   :model-value="
                                     formData.investigationDateStart
                                       ? date2Thai(
-                                          formData.investigationDateStart
+                                          formData.investigationDateStart as Date
                                         )
                                       : null
                                   "
@@ -922,15 +928,8 @@ onMounted(async () => {
                               <template #trigger>
                                 <q-input
                                   for="#dateEnd"
-                                  :input-style="
-                                    isReadonly ||
-                                    formData.investigationExtendHistory.length >
-                                      0
-                                      ? { color: 'black' }
-                                      : { color: 'teal' }
-                                  "
                                   ref="dateEndRef"
-                                  class="full-width cursor-pointer"
+                                  :class="inputEdit(isReadonly)"
                                   :readonly="
                                     isReadonly ||
                                     formData.investigationExtendHistory.length >
@@ -943,7 +942,7 @@ onMounted(async () => {
                                   borderless
                                   :model-value="
                                     formData.investigationDateEnd
-                                      ? date2Thai(formData.investigationDateEnd)
+                                      ? date2Thai(formData.investigationDateEnd as Date)
                                       : null
                                   "
                                   :rules="[
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index 01413f741..13d9263c0 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -226,7 +226,7 @@ function onSubmit() {
 
         formData.disciplinaryDateStart = moment(disciplinaryDateStart).format(
           "YYYY-MM-DD"
-        );
+        ) ;
         formData.disciplinaryDateEnd =
           moment(disciplinaryDateEnd).format("YYYY-MM-DD");
       }
@@ -465,10 +465,30 @@ function resetExtend() {
   formData.daysExtend = 0;
 }
 
+function inputEdit(val:boolean){
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+function inputEditExtend(val: boolean) {
+  if (formData.disciplinaryExtendHistory.length > 0) {
+    return {
+      "full-width cursor-pointer ": val,
+    };
+  } else {
+    return {
+      "full-width cursor-pointer ": val,
+      "full-width cursor-pointer inputgreen": !val,
+    };
+  }
+}
 /** Hook */
 onMounted(async () => {
   mainStore.rowsAdd = [];
   await fetchOrganization();
+  
 });
 </script>
 <template>
@@ -722,10 +742,8 @@ onMounted(async () => {
                         :readonly="isReadonly"
                         outlined
                         dense
-                        :input-style="
-                          isReadonly ? { color: 'black' } : { color: 'teal' }
-                        "
-                        class="col-xs-12 col-sm-4"
+                        :class="inputEdit(isReadonly)"
+                        
                         hide-bottom-space
                         :model-value="
                           formData.disciplinaryDateInvestigation != null
@@ -774,11 +792,8 @@ onMounted(async () => {
                         :readonly="isReadonly"
                         ref="disciplinaryDateAllegationRef"
                         outlined
-                        :input-style="
-                          isReadonly ? { color: 'black' } : { color: 'teal' }
-                        "
+                        :class="inputEdit(isReadonly)"
                         dense
-                        class="col-xs-12 col-sm-4"
                         hide-bottom-space
                         :model-value="
                           formData.disciplinaryDateAllegation != null
@@ -917,13 +932,7 @@ onMounted(async () => {
                                     for="#date"
                                     class="full-width cursor-pointer"
                                     ref="dateRef"
-                                    :input-style="
-                                      isReadonly ||
-                                      formData.disciplinaryExtendHistory
-                                        .length > 0
-                                        ? { color: 'black' }
-                                        : { color: 'teal' }
-                                    "
+                                    :class="inputEditExtend(isReadonly)"
                                     :readonly="
                                       isReadonly ||
                                       formData.disciplinaryExtendHistory
@@ -937,7 +946,7 @@ onMounted(async () => {
                                     :model-value="
                                       formData.disciplinaryDateStart
                                         ? date2Thai(
-                                            formData.disciplinaryDateStart
+                                            formData.disciplinaryDateStart as Date
                                           )
                                         : null
                                     "
@@ -983,15 +992,8 @@ onMounted(async () => {
                                 <template #trigger>
                                   <q-input
                                     for="#dateEnd"
-                                    :input-style="
-                                      isReadonly ||
-                                      formData.disciplinaryExtendHistory
-                                        .length > 0
-                                        ? { color: 'black' }
-                                        : { color: 'teal' }
-                                    "
+                                    :class="inputEditExtend(isReadonly)"
                                     ref="dateEndRef"
-                                    class="full-width cursor-pointer"
                                     :readonly="
                                       isReadonly ||
                                       formData.disciplinaryExtendHistory
@@ -1005,7 +1007,7 @@ onMounted(async () => {
                                     :model-value="
                                       formData.disciplinaryDateEnd
                                         ? date2Thai(
-                                            formData.disciplinaryDateEnd
+                                            formData.disciplinaryDateEnd as Date
                                           )
                                         : null
                                     "
@@ -1085,11 +1087,8 @@ onMounted(async () => {
                       ref="disciplinaryDateEvidentRef"
                       outlined
                       dense
-                      class="full-width"
                       hide-bottom-space
-                      :input-style="
-                        isReadonly ? { color: 'black' } : { color: 'teal' }
-                      "
+                      :class="inputEdit(isReadonly)"
                       :model-value="
                         formData.disciplinaryDateEvident != null
                           ? date2Thai(formData.disciplinaryDateEvident)
@@ -1139,11 +1138,8 @@ onMounted(async () => {
                       :readonly="isReadonly"
                       ref="disciplinaryDateResultRef"
                       outlined
-                      :input-style="
-                        isReadonly ? { color: 'black' } : { color: 'teal' }
-                      "
+                      :class="inputEdit(isReadonly)"
                       dense
-                      class="full-width"
                       hide-bottom-space
                       :model-value="
                         formData.disciplinaryDateResult != null
diff --git a/src/modules/11_discipline/interface/request/disciplinary.ts b/src/modules/11_discipline/interface/request/disciplinary.ts
index c15f32ec8..d4e960824 100644
--- a/src/modules/11_discipline/interface/request/disciplinary.ts
+++ b/src/modules/11_discipline/interface/request/disciplinary.ts
@@ -68,8 +68,8 @@ interface FormData {
   directors: Director[];
   persons: Persons[];
   extendStatus: boolean;
-  disciplinaryDateStart: Date | null;
-  disciplinaryDateEnd: Date | null;
+  disciplinaryDateStart: Date | null|string;
+  disciplinaryDateEnd: Date | null|string;
   daysExtend: number;
   disciplinaryDateInvestigation: Date | null;
   disciplinaryDateResult: Date | null;
diff --git a/src/modules/11_discipline/interface/request/investigateFact.ts b/src/modules/11_discipline/interface/request/investigateFact.ts
index 02aafc9fb..0d8fca868 100644
--- a/src/modules/11_discipline/interface/request/investigateFact.ts
+++ b/src/modules/11_discipline/interface/request/investigateFact.ts
@@ -10,8 +10,8 @@ interface FormData {
   evidenceFiles: any | null;
   fileComplaint: File | null;
   investigationExtendStatus: boolean | null;
-  investigationDateStart: Date | null;
-  investigationDateEnd: Date | null;
+  investigationDateStart: Date | null|string;
+  investigationDateEnd: Date | null|string;
   investigationDaysExtend: number | null;
   investigationStatusResult: string;
   investigationCauseText: string;