Open a date picker from inside a v-select VUE - javascript

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"

Related

vuejs vee validate multiselect selected value

I have a problem
I have a api that I took countries
text(string) and value(number) information is coming in this api
and I have a number value
I want it to find the number value I have and the value (number) I pulled from the api.
how can I do that
currently the ones coming from the api are listed
<Multiselect
ref="multiselectRef"
:disabled="disabled"
v-model="value"
:options="options"
:mode="mode"
:valueProp="valueProp"
:label="labelProp"
:trackBy="trackBy"
:name="name"
:searchable="searchable"
:loading="loading"
:tabindex="tabindex"
:noOptionsText="noOptionsText"
#select="$emit('select', $event)"
#change="change"
:placeholder="placeholder"
class="multiselect__item"
/>
my component
<KbsMultiSelect
track-by="text"
name="country_id"
:options="country"
labelProp="text"
label="Ülke"
placeholder="Ülke Seçiniz"
valueProp="value"
/>

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>

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

Is there any way to keep date selected on changing Month or Year of the react-datepicker in reactjs?

Currently, in the react-datepicker, I am using Month selector and Year selector for DOB in guest detail form.
What happening is:-
The selected date is highlighted on the calendar, which is fine.
What I need to implement:-
When I change Month/Year on the calendar, I want to update the selected date to the same date as it was before with updated Month/Year.
Please help me with any possibility.
I am not able to find the solution for this.
The following code is what I am using for current react-datepicker:
<DatePicker
className="date-field ub-l"
openToDate={new Date("1993/09/28")}
selected={this.state.date}
onSelect={this.handleChange}
onChange={this.handleChange} //only when value has changed
maxDate={new Date()}
placeholderText={this.props.placeholder}
disabledKeyboardNavigation={true}
showMonthDropdown={true}
showYearDropdown={true}
name={this.props.name}
disabledNavigation
inputProps={{readOnly: true}}
dropdownMode="select"
autocomplete={false}
/>
If I change Month/Year is it possible to update the selected date with the updated Month/Year automatically before selecting any date?
You're looking for the adjustDateOnChange prop. It automatically does what you're looking for
<DatePicker
selected={selectedDate}
onChange={date => changeDate(date)}
dropdownMode="select"
showMonthDropdown
showYearDropdown
adjustDateOnChange
/>
Codesandbox

Categories

Resources