fix: correct render of datepicker on mount in show view

AdminForth/1959/edit-view-datepicker-does-not-

Author: yaroslav8765

adminforth/spa/src/afcl/DatePicker.vue

@@ -46,7 +46,7 @@
   </div>
 </template>
 <script setup>
-import {ref, computed, onMounted, watch, onBeforeUnmount, nextTick} from 'vue';
+import {ref, computed, onMounted, watch, onBeforeUnmount} from 'vue';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 
@@ -89,6 +89,8 @@ const startTime = ref('');
 
 const datepickerObject = ref('')
 
+let datepickerReady;
+
 const start = computed(() => {
   if (props.column?.type === 'time') {
     return formatTime(startTime.value);
@@ -118,14 +120,15 @@ async function updateFromProps() {
   } else if (props.column.type === 'time') {
     startTime.value = props.valueStart;
   } else {
-    // wait ref to initialize
-    await nextTick();
+    // datepicker is created only after its lazy-loaded chunk resolves
+    await datepickerReady;
     datepickerObject.value.setDate(dayjs(props.valueStart).format('DD MMM YYYY'));
     startTime.value = dayjs(props.valueStart).format('HH:mm:ss')
   }
 }
 
 onMounted(() => {
+  datepickerReady = initDatepickers();
   updateFromProps();
 
   watch(() => [props.valueStart], (value) => {
@@ -183,10 +186,6 @@ const toggleTimeInputs = () => {
   showTimeInputs.value = !showTimeInputs.value
 }
 
-onMounted(() => {
-  initDatepickers();
-});
-
 onBeforeUnmount(() => {
   removeChangeDateListener();
   destroyDatepickerElement();