I'm interested in the question, can I add a date selection confirmation button on the calendar? I use vuejs-datepicker (vue version 2)
In the component itself, I found only slots for adding elements before or after the input, but I can’t add content to the calendar itself
There is only one slot in vuejs-datepicker - and it is above the calendar. You may need to fork the component and change it to suit your needs.
Related
I have 2 questions,
How can I set the value of the global search box and trigger the filter programmatically, using java script (basically I want to implement a persistent filter, based on the last user input, as the user navigates in and out of the page), check image below
Considering the Veu devtool component, I can find the vue-good-table Component and its Search subcomponent. And I can see that there is a value propuerty on this subcomponent that has the same value I had typed in the search box.
So my question is if with this information can I have a way to solve my first question, does the information in the Vue devtool can help me figure out the references to that object and value and then set it?
This could be a very useful tool in case I have a similar problem in the future with another component.
Have very little experience with Veu and general searches on how to access data or elements in components has been confusing, I just understand the properties and events to pass data, but in this case this is an imported component, so I can not hack it.
Thanks #tao, I read the docs before but skipped noticing this property
externalQuery
This is the one that solves the problem, you can link a variable to the search item and I then use your own text input box to implement the solution.
I try to fill a form using cypress. That form is built with Vue and it looks like this
The problem is, dispatch date is a date picker that I fill using cypress type() command. For example
cy.get('#dispatch-date').type('22-10-2022');
However, this is how the form looks like after the type command
the drop down menu of the date picker covers the rest of the form not allowing cypress to continue the form filling. I tried clicking {enter} after typing the date but it submits the form. I also tried the {force:true} option, but it makes the test fails because the datepicker is actually a <div> and not an <input> tag. Any ideas how to solve this problem?
It's going to depend on the exact datepicker you have in the app, or more precisely the way the user interacts with it.
For example if it's the vue2-datepicker you can probably just tab off the control to trigger it's update.
cy.get('#dispatch-date')
.type('{selectAll}22-10-2022') // {selectAll} if not empty
.trigger('keydown', {keyCode: 9, which: 9})
cy.get('#dispatch-date')
.should('have.value', '22-10-2022')
Note a click on the <body> element will close the picker, but the value is not updated to v-model.
I am trying to create component which would extend v-btn in such a way that every time I click a button, it should emit short beep, and disable the button for 5 seconds.
It would be ideal for the button to change color while disabled.
This is a problem, since color is a property, and I can't overwrite it's value...
Also, when I try to invoke super.click(e), I get an error.
You can check example here: https://codesandbox.io/s/elegant-glade-pnhqx
Your Btn component should just "use" v-btn rather than extending it.
v-bind="$attrs" is to copy any <btn>'s attribute onto <v-btn>.
#click event is captured and reemited as-is after doing what needs to be done
See https://codesandbox.io/s/immutable-paper-w1wck?file=/src/components/Btn.vue:41-56
I'm using the VueJS Vuetify framework and I need a pagination option with more features then the basic one available.
what am i looking for:
an option to add custom names (not just numbers)
a tooltip over the buttons
to disable/enable just some of the buttons
pagination - meaning: use next, previous and "..." if there are too many pages
if the pagination had a template option (slot) that would of been perfect.
now i am wondering how is the best why to get my goal. is there a way to add templates to vuetify? is there a different component that has this options on the pagination?
Read the api here In answer to your questions:
1+2+3 This is not supported in vuetify out of the box and therefore you may want to consider writing your own pagination tool or looking for a different package.
4. This can be set in the props as described in the docs above, see total-visible prop and length.
I'm currently making a resource management tool where I need to draw events on a calendar like Google Calendar does. I'm making this calendar in Vue and I have also tried to implement the new Vuetify calendar component but I can't get it to work the way I want so I started to make it on my own.
Now my question:
Is there any vue dependency available that lets you draw events (rectangles) on a calendar?
Vuetify's calendar gives You almost full control of the calendar including day squares (You call them rectangles) via scoped slots. You can make Your own layout and logic.
If this is not enough for You, try checking out Vue-Full-Calendar (https://github.com/CroudTech/vue-fullcalendar) or Toast UI Calendar (https://ui.toast.com/tui-calendar/) - my personal favorite.