Develop Reference

Open a date picker from inside a v-select VUE

I have a v-select with four items to choose different dates. The last item in the select is for choosing a manual date and then I want a menu/dialog to pop open with a date picker. But I can't get that to work...
<v-select
v-model="dates"
:items="items"
clearable
hide-details
:label="$tc('Dates')"
>
<v-menu
v-model="showDatePicker"
:close-on-content-click="false"
>
<template #item="{ item, on, attrs }"
><v-list-item v-attrs="attrs" v-on="on">{{ item.text }}</v-list-item>
</template>
<v-date-picker v-model="dates" #input="showDatepicker = false" />
</v-menu>
</v-select>
I've tried many different things but this is the latest one. Anyone that knows how to solve this? :)

I propose to use v-select component.
With a watcher on the selected value, you can use v-if for the date picker with a boolean value that changes to true when you pick the selected value to open the date picker.
Else the value will be false and the date picker will get v-if="false"

mat input with mat-datepicker-toggle problem

I have a form where every required field turns red if the user clicks and blur the field without writing anything on the field, the problem comes with this date picker
<mat-form-field class="contenedorFecha" appearance="outline" color="accent">
<mat-label>Fecha plantación</mat-label>
<input matInput [matDatepicker]="fechaPlantacion" formControlName="fechaPlantacion" readonly (click)="fechaPlantacion.open()">
<div matSuffix style="display:flex; align-items: center">
<mat-datepicker-toggle [for]="fechaPlantacion"></mat-datepicker-toggle>
<button mat-icon-button (click)="deleteDate('fechaPlantacion', $event)" [disableRipple]="true"
*ngIf="fincaForm.get('fechaPlantacion').value !== null">
<mat-icon class="nav-link-icon mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">close</mat-icon>
</button>
</div>
<mat-datepicker #fechaPlantacion></mat-datepicker>
</mat-form-field>
When I click on the input it opens the matDatePicker, but as it opens the date picker the input blurs, so the input changes to red, any way to prevent this? I've tried with css but the problem is I want the input to be red but only when it should

Yes the problem is because the focus gets out of the input control and goes to the calendar. If you are only using the default button as the trigger to open the date picker, then you won't encounter this issue. But like what you did, sometimes it's better to add that (focus) or (click) trigger. I can only think of one work around.
Start by removing the initial validators from your field. Then put a handler whenever the material date picker was closed such as:
<mat-datepicker #fechaPlantacion (closed)="close()"></mat-datepicker>
and in the close method, you have to set the validators dynamically:
close() {
this.fechaPlantacion.setValidators(Validators.required);
this.fechaPlantacion.updateValueAndValidity(null);
}
This way, the validation will only be added after the selection (or not selecting anything) from the dates in the calendar. I also tried using readonly input and still working fine after testing in my local machine.

How to add Date Click to Vuetify Calendar

I am attempting to build a Vuetify calendar based on the following repo: https://github.com/jsfanatik/vuestacks-calendar-vue-firebase. My goal is to enable the user to add a new calendar event by clicking directly on a date in the calendar, as opposed to merely clicking the new event button at the top of the UI. To achieve this, I changed #click:date="viewDay to #click:date="dialogDate = true" in order to enable clicking of a date to open a new event input dialog box (see dialog box code below). I want to modify this new dialog box so that the start and end time of the date clicked (presumably 12am to 12am) are automatically passed into this dialog box and bound to the start and end fields as soon as the user clicks a given date. Any recommendations on how to achieve this?
Dialog - Date click
<v-dialog v-model="dialogDate" max-width="500">
<v-card>
<v-container>
<v-form #submit.prevent="addEvent">
<v-text-field v-model="name" type="text" label="event name (required)"></v-text-field>
<v-text-field v-model="details" type="text" label="detail"></v-text-field>
<v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
<v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
<v-text-field v-model="color" type="color" label="color (click to open color menu)"></v-text-field>
<v-btn type="submit" color="primary" class="mr-4" #click.stop="dialog = false">
create event
</v-btn>
</v-form>
</v-container>
</v-card>
</v-dialog>

Apologies if I misunderstood your question, but I think you might want to pass the date in through a method like:
Instead of
#click:date="dialogDate = true"
Do something like
#click:date="setDialogDate(date)"
And then have a method called setDialogDate that gets passed in the specific date the user clicked on. You can open and close the dialog in that method then.

How to input date and time in a Vuetify text input field

I am attempting to build a Vuetify form that enables inputting of a date format that includes both the date and specific time of the event, for both starting and ending. So far, I have the following:
<v-form #submit.prevent="addEvent">
<v-text-field v-model="eventName" type="text" label="event name (required)"></v-text-field>
<v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
<v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
<v-btn type="submit" color="primary" class="mr-4" #click.stop="dialog = false">
Add Event
</v-btn>
</v-form>
Is there an input type that allows both date and time to be inputted into the same input field? If so, how can I implement such a field? Thanks!

There are Vuetify components for picking a date and time, but no combined one.
There is a basic html component you could check out: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
Otherwise you'll have to make a custom one.

In HTML way, you can use datetime-local as type
<input type="datetime-local" name="datetime">

Is there an input type that allows both date and time to be inputted into the same input field?
The v-text-field component in Vuetify lets you select date and time together if you set type="datetime-local" instead of "date".
Explanation of datetime-local: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

Vue, prepopulating a multiselect value

I'm currently using a Vue multiselect by loading it with options from an axios return object into taskLocations:
<multiselect
v-model="taskLocations"
:options="locationOptions"
:multiple="true"
placeholder="Please choose at least one location"
label="name"
track-by="id">
</multiselect>
This works perfectly but I'm now loading the page with another response that I've assigned to editDetails[] in my data return, and while that works in order to dump data for confirmation, I can't figure out how to keep the multiselect list of options from taskLocations while also preopopulaitng the value for the multiselect with editDetail.location
<multiselect
v-for="editDetail in editDetails"
v-model="taskLocations"
:options="locationOptions"
:multiple="true"
placeholder="Please choose at least one location"
label="name"
track-by="id">
</multiselect>
How can I do this?