I'm working on a Vue.js project . I'd like to have an icon displaying a calendar, and when you click on the icon , you'll get a datepicker to choose multi date from.
How do I implement that?
I've looked at the docs:
and I've tried something like this:
align="right"
v-model="test"
icon="calendar"
:lang="lang"
:multi="multi"
:always-display="false"
>
</m-date-picker>```
but that doesn't working
What am I missing?
Related
I'm trying to add a file input that will open only by clicking on the icon
Only Vuetify2 works (by using hide input ), not Vuetify3
Why is this happening? What should I do when there are so many differences between versions?
<v-file-input
hide-input
truncate-length="15"
I work on test automation . I am trying to select an expiry date in the date picker component . App is implemented using react native. Developer has used date picker component available in https://github.com/xgfe/react-native-datepicker . But I am unable to see the android tags corresponding to the date picker in Appium inspector and UIAutomatorViewer. The app source looks like below
inspector app source
After the last android.view.ViewGroup tag , nothing is displayed for date picker in inspector.
As a workaround , we asked the developer to set ids for ‘Cancel’ and ‘Confirm’ buttons . So that atleast we can select first date and proceed . But the developer informed that the date picker is coming from reactive-native-picker library(1.7.2 version) . So they are unable to set any ids inside for the ‘Cancel’ and ‘Confirm’ buttons.
Please find the xml source which copied from inspector . There is no mention of the date picker element
xml source
Any help is appreciated . Thanks in advance.
I'm using Vuetify (2.6.1) data tables and they work great.
I wonder if it is possible to customize the UI of a particular case:
-> when the v-data-table is in responsive into the mobile breakpoint.
The UI looks like this:
data table list on mobile - sort field highlighted
Is it possible, just in this case, to customize the select highlighted in red here ?
I tried to update the the global CSS but things are not clean because when an item is selected from the list there is a v-chip added:
data table list on mobile with sort selected
I would like the select to look like and behave just like in this case here highlighted in red:
vuetify documentation - select solo style
I searched on the documentation and API, stack overflow, vuetify github's and tried different ways but I haven't found a way on how to properly style the sort select input.
Is anyone have any idea ? Maybe I'm missing something.
Thank you for your help.
You can use the dynamic slots item.<name> and customise v-select or v-autocomplete inside: https://vuetifyjs.com/en/components/data-tables/#item
I had used date time picker in react native, but I want to do in my custom UI for the date picker. How can I do it?
I want to do as shown in below image in both android and IOS
Follow the below steps.
Use new Date API to get Date, Month and Years store them in array.
then display in row so three are side to each other.
Hide Top and Bottom Portion View Using overflow hidden
That is it you can generate a Date Picker like you side.
You can get that look by using the react-native-date-picker library and the following code:
<DatePicker
date={date}
onDateChange={setDate}
mode="date"
/>
I'm writing a CRUD app using Vue with Vuetify. I have some links defined as v-btns using the "to" attribute. I've noticed that when clicking on buttons, the active button usually changes so that the button corresponding to the user's current location is highlighted. However, I have two routes that look like this:
"/songs/new"
"/songs"
The v-btn's have the following "to" attributes:
to:"/songs/new"
to:"/songs"
However, when clicking on the button that directs to "/songs/new", vuetify sets both buttons to be active. Any idea why it does this?
You need to make use of exact attribute.
<v-btn to="/songs/new" exact>Songs</v-btn>
<v-btn to="/songs" exact>New Song</v-btn>
Now the button will get active class only if you were in exactly route.
Also you can make use of exact-active-class to use custom active classes.