Help: How to pre-set a date and time value based on string?

[SimFre]

I've got a dataset being loaded with fetch() and eventually lands into this.data. I'll have this.data.meetingdate = "2022-03-09" and this.data.meetingtime = "13:45". How do I create a date picker and time picker respectively that start out with those values, and return the same formats into those properties if they're changed?

[Jasenkoo]

Let's say you have something like this

Pure JS solution:

<template>
    <Datepicker v-model="date" />
</template>

<script setup>
   import { ref } from 'vue'; 
   import Datepicker  from 'vue3-date-time-picker';

   const date = ref(null);

   const fetchMethod = async () => {
     // You get the date and the time strings
     const { meetingdate, meetingtime } = await fetch('some url')
     // Here we parse this separate date instances into the date object
     date.value = new Date(`${meetingdate} ${meetingtime}`);
   }

   // This method will separate date and time from the date object
   const getDateStrings = () => {
      const year = date.value.getFullYear();
      const month = date.value.getMonth() + 1 < 10  ?  `0${date.value.getMonth() + 1}` : date.value.getMonth() + 1;
      const day = date.value.getDate() < 10 ? `0${date.value.getDate()}` : date.value.getDate();
      const hours = date.value.getHours() < 10 ? `0${date.value.getHours()}` : date.value.getHours()
      const minutes = date.value.getMinutes() < 10 ? `0${date.value.getMinutes()}` : date.value.getMinutes()

     const dateString = `${year}-${month}-${day}`;
     const timeString = `${hours}:${minutes}`;

     return { dateString, timeString };
   }
</script>

Or use some external library for a cleaner solution (In my example it is date-fns);

<script setup>
   import { ref } from 'vue'; 
   import { format } from 'date-fns' 
   import Datepicker  from 'vue3-date-time-picker';

   const date = ref(null);

   const fetchMethod = async () => {
     // You get the date and the time strings
     const { meetingdate, meetingtime } = await fetch('some url')
     // Here we parse this separate date instances into the date object, you can also use date-fns to parse it
     date.value = new Date(`${meetingdate} ${meetingtime }`);
   }

   // Use date-fns to format the date object into an appropriate string and split values with space
   const getDateStrings = () => {
      const stringValue = format(date.value, `MM/dd/yyyy HH:mm`)
      const [dateString, timeString] = stringValue.split(' ');
      return { dateString, timeString }; 
   }
</script>

Hope it helps, there might be some type here, I am not sure 😄