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"

Combobox in vuetify does not work like input

i am using vuetify and his component combobox for search action on website.
when i am typing something in combobox text value add in watcher only when event mouse exit, it does not good for me, because if user typed smthing in this field then clicked on button search nothing happening, only on second click search will work
<v-combobox
dense
v-model="watcher"
items="ItemsArray"
item-text="ItemsArray.item_name"
label="item name"
/>
<v-btn #click="Search">Search</v-btn>

add ":" for the before items. such as,
<v-combobox
dense
v-model="watcher"
:items="ItemsArray"
:search-input.sync="search"
item-text="ItemsArray.item_name"
label="item name"
/>
<v-btn #click="Search">Search</v-btn>

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 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

Angular Material datepicker manual open

In the datepicker documentation there is an example of the popup calendar being controlled programatically by using the open() and close() methods like so:
<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>
One can also set the opened property to true/false like so:
<button mat-raised-button (click)="picker.opened = true">Open</button>
I wonder if there is anyway to use this to get the calendar popup to stay permanently opened for the purpose of letting the user click around on different dates, and having those selection reflected in the input?

I guess you can try this :
<mat-form-field class="example-full-width">
<input matInput (dateChange)="reOpenCalendar()" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>
in your component ts/js file you need to declare a new method :
export class YourComponent{
#ViewChild('picker') picker;
//....
reOpenCalendar(){
let self = this;
setTimeout(
()=>{
self.picker.open();
},
50
);
}
}
This will introduce a flash effect as the date picker disappears and quickly reappears.
The other solution would be fork angular material datepicker component in your local project and introduce an Input property to disable the closing when a date is selected

The built-in datepicker control of Material library comes with an internal Calendar component. You can use the following to have a calendar that is always open (without the input box but still works with date/month/year selection)
Read more about the calendar here:
https://onthecode.co.uk/angular-material-calendar-component/