From 05ee683f352a042410e0228ceea635a8c4bb945d Mon Sep 17 00:00:00 2001
From: mightycox <j.acox@hotmail.com>
Date: Thu, 28 Sep 2023 13:24:23 -0700
Subject: [PATCH] EDX-1834 - Fixes birthdate widget on step 2 screen

---
 .../sdcCollection/StepTwoValidateData.vue     | 66 ++++---------------
 .../utils/sdc/sdcValidationFieldMappings.js   |  2 +-
 2 files changed, 12 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/sdcCollection/StepTwoValidateData.vue b/frontend/src/components/sdcCollection/StepTwoValidateData.vue
index a623f1520..646b87264 100644
--- a/frontend/src/components/sdcCollection/StepTwoValidateData.vue
+++ b/frontend/src/components/sdcCollection/StepTwoValidateData.vue
@@ -653,38 +653,17 @@
                                   @update:focused="onFieldClick(sdcFieldMappings[field]?.key, $event, issue?.validationIssueSeverityCode)"
                                 />
                                 <div v-else-if="sdcFieldMappings[field]?.type === 'datePicker'">
-                                  <v-menu
-                                    id="dobValidationDatePicker"
-                                    ref="dobDateFilter"
-                                    :close-on-content-click="false"
-                                    transition="scale-transition"
-                                    offset-y
-                                    min-width="auto"
-                                  >
-                                    <template #activator="{ on, attrs }">
-                                      <v-text-field
-                                        :id="`${sdcFieldMappings[field].key}ValidationDatePicker`"
-                                        v-model="sdcSchoolCollectionStudentDetailCopy[sdcFieldMappings[field].key]"
-                                        :rules="sdcFieldMappings[field].options.rules"
-                                        class="pt-0 mt-0"
-                                        variant="underlined"
-                                        label="Start Date"
-                                        prepend-inner-icon="mdi-calendar"
-                                        clearable
-                                        readonly
-                                        v-bind="attrs"
-                                        @click:clear="clearDobDate"
-                                        @click="openDobDatePicker"
-                                      />
-                                    </template>
-                                  </v-menu>
-                                  <VueDatePicker
-                                    ref="dobDatePicker"
+                                  <v-text-field
+                                    :id="`${sdcFieldMappings[field].key}ValidationDatePicker`"
                                     v-model="sdcSchoolCollectionStudentDetailCopy[sdcFieldMappings[field].key]"
                                     :rules="sdcFieldMappings[field].options.rules"
-                                    :enable-time-picker="false"
-                                    format="yyyy-MM-dd"
-                                    @update:model-value="saveDobDate"
+                                    class="pt-0 mt-0"
+                                    variant="underlined"
+                                    :label="sdcFieldMappings[field].label"
+                                    prepend-inner-icon="mdi-calendar"
+                                    :clearable="true"
+                                    type="date"
+                                    @click:clear="clearDobDate"
                                   />
                                 </div>
                               </div>
@@ -768,9 +747,7 @@ import {ApiRoutes} from '../../utils/constants';
 import {SDC_VALIDATION_FIELD_MAPPINGS} from '../../utils/sdc/sdcValidationFieldMappings';
 import {isEmpty, omitBy, cloneDeep, sortBy} from 'lodash';
 import {formatDate} from '../../utils/format';
-import moment from 'moment/moment';
 import Spinner from '../common/Spinner.vue';
-import VueDatePicker from '@vuepic/vue-datepicker';
 import PrimaryButton from '../util/PrimaryButton.vue';
 import {setSuccessAlert, setFailureAlert} from '../composable/alertComposable';
 import { sdcCollectionStore } from '../../store/modules/sdcCollection';
@@ -781,8 +758,7 @@ export default {
   components: {
     ConfirmationDialog,
     Spinner,
-    PrimaryButton,
-    VueDatePicker
+    PrimaryButton
   },
   props: {
     schoolCollectionObject: {
@@ -800,7 +776,6 @@ export default {
       studentListData: [],
       totalStudents: 0,
       sdcCollection: sdcCollectionStore(),
-      dobDatePicker: null,
       legalUsualNameFilter: null,
       penFilter: null,
       from: 'uuuuMMdd',
@@ -1171,13 +1146,7 @@ export default {
       }
     },
     clearDobDate(){
-      this.sdcSchoolCollectionStudentDetailCopy.value.dob = null;
-    },
-    openDobDatePicker(){
-      this.dobDatePicker.value[0].openMenu();
-    },
-    saveDobDate(){
-      this.sdcSchoolCollectionStudentDetailCopy.value.dob = moment(this.sdcSchoolCollectionStudentDetailCopy.value.dob).format('YYYY-MM-DD').toString();
+      this.sdcSchoolCollectionStudentDetailCopy.dob = null;
     }
   }
 };
@@ -1242,19 +1211,6 @@ export default {
    height: 100vh;
  }
 
- :deep(.dp__input_wrap){
-   height: 0px;
-   width: 0px;
- }
-
- :deep(.dp__input){
-   display: none;
- }
-
- :deep(.dp__icon){
-   display: none;
- }
-
  .form-hint{
    color: rgb(56, 89, 138);
    font-size: 14px;
diff --git a/frontend/src/utils/sdc/sdcValidationFieldMappings.js b/frontend/src/utils/sdc/sdcValidationFieldMappings.js
index c5996380b..a4ecdfaea 100644
--- a/frontend/src/utils/sdc/sdcValidationFieldMappings.js
+++ b/frontend/src/utils/sdc/sdcValidationFieldMappings.js
@@ -21,7 +21,7 @@ export const SDC_VALIDATION_FIELD_MAPPINGS = Object.freeze({
   USUAL_FIRST_NAME: {label: 'Usual Given', key: 'usualFirstName', type: 'input', options: {}},
   USUAL_MIDDLE_NAMES: {label: 'Usual Middle', key: 'usualMiddleNames', type: 'input', options: {}},
   USUAL_LAST_NAME: {label: 'Usual Surname', key: 'usualLastName', type: 'input', options: {}},
-  DOB: {label: 'DOB', key: 'dob', type: 'datePicker', options: {}},
+  DOB: {label: 'Birthdate', key: 'dob', type: 'datePicker', options: {}},
   GENDER_CODE: {label: 'Gender', key: 'gender', type: 'select', options: {items: 'genderCodes', itemValue: 'genderCode'}},
   GRADE_CODE: {label: 'Grade Code', key: 'enrolledGradeCode', type: 'select', options: {items: 'enrolledGradeCodes', itemValue: 'enrolledGradeCode'}},
   SPECIAL_EDUCATION_CATEGORY_CODE: {label: 'Special Education Category', key: 'specialEducationCategoryCode', type: 'select', options: {items: 'specialEducationCategoryCodes', itemValue: 'specialEducationCategoryCode'}},