Level 63
Doesn't your date picker have a v-model variable assigned to it ? With a v-model, this would be automatic when you emit the update of the value from the date picker component.
Sep 9, 2022
4
Level 6
Getting DatePicker value on update and setting form value equal to DatePicker value
I have been trying for the better part of a day to get this to work, but to no avail. I am using the Vue3 DatePicker and in my Vue component I have a form data field, and that form has a date value that is just an empty string. The code I have is here:
<template>
<Head title="Dashboard"/>
<Main v-bind:show-footer="false">
<section class="pt-6 mt-6" style="min-height: 75vh;">
<div class="container">
<form @submit.prevent="submit">
<div class="row">
<div class="col-lg-8 position-relative">
<p class="subtitle text-primary">{{ $page.props.auth.user.attributes.name }}</p>
<h1 class="h2 mb-5"> New Job Request <span class="text-muted float-end">Step {{
stepNum
}}</span>
</h1>
<div v-if="stepNum === 3" data-step="3" class="text-block">
<h4 class="mb-4">Schedule and Pickup</h4>
<datepicker
class="mb-4"
placeholder="Select Date"
:disabled-dates="{
to: minDate,
from: maxDate,
}"
:prevent-disable-date-selection="preventDisableDateSelection"
@input="dateChanged($event)"
>
</datepicker>
</div>
</div>
</div>
</form>
</div>
</section>
</Main>
</template>
<script>
import Main from "@/Layouts/Main";
import {Head, usePage} from '@inertiajs/inertia-vue3';
import {
computed,
ref
} from "vue";
import {add} from 'date-fns';
import {Inertia} from "@inertiajs/inertia";
import Datepicker from 'vuejs3-datepicker';
export default {
components: {
Main,
Head,
Inertia,
Datepicker,
},
setup() {
const dateSelected = ref(new Date())
const preventDisableDateSelection = true;
const minDate = new Date();
const maxDate = add(new Date(), {days: 14});
return {
user,
minDate,
maxDate,
dateSelected,
preventDisableDateSelection,
};
},
data() {
return {
form: {
pickupDate: '',
},
};
},
methods: {
dateChanged(date) {
console.log(date);
this.form.pickupDate = date.value;
},
},
}
</script>
I have removed other bits of the code that is unrelated to the DatePicker (such as the form step counter you can see in the div and the v-if).
What is confusing me is that the form is reactive, and the console.log(date) on the dateChanged() method IS showing the correct selected date on the console, but the form.pickupDate never updates, it's always just an empty string. I'm not sure why this is happening if the console log is working just fine.
Any ideas? I'm relatively new to Vue and am trying to figure out how to pass data through appropriately. Thanks!
Edit: I have also tried this.form.pickupDate = date; instead of date.value and that doesn't change the result
Level 6
adding a v-model="form.pickupDate" doesn't change any of the behavior, it still isn't changing the pickupDate on the form.
1 like
Level 63
@garrettmassey Are you sure that @input="dateChanged($event)" is useful ?
Level 1
@garrettmassey have you gotten this to work? running into exactly the same problem. v-model should work but doesn't
1 like
Please or to participate in this conversation.