Closed SimFre closed 2 years ago
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 😄
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?