I’m using “QDate” Quasar component.
I need to handle event when user clicks on the date. QDate provides an event named "#input " but this event is only triggered when model changes. But what if user clicks on already selected date. How to capture the event in that case?
Can anyone help me on this?
Thanks
in quasar v1 example
#input="() => $refs.qDateProxy.hide()"
in quasar v2 vue 3 maybe use
#update:model-value -> function(value, reason, details)
Documentation
https://quasar.dev/vue-components/date#basic
QDate API - click on events
I didn't found any problem with the event mentioned! in case still have the problem let's know your quasar version and vuejs too.
const app = new Vue({
el: '#root',
data: {
message: 'كيف حالك اليوم؟',
date: '2019/02/01',
}
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar#1.15.23/dist/quasar.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vue#^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar#1.15.23/dist/quasar.umd.min.js"></script>
<div id="root">
<h5>{{ message }}</h5>
<div class="flex">
<div class="">
<q-date v-model="date" #input="$q.notify('date clicked')" />
</div>
</div>
</div>
Tested configuration: quasar#1.15.23
Related
Using BootstrapVue, I have the following input element inside a b-form:
<b-form-input v-model="myTest" type="number" max="9999"></b-form-input>
I want the following behavior:
The user should be allowed to only enter digits (and not letters or other characters). I tried implementing this with type="number", but it is only having an effect in Chrome, and not Firefox.
The maximum number that the user can enter should be four digits. I tried implementing this with max="9999", but it doesn't have any effect.
How do I implement this intended behavior?
There doesn't seem to be a way to do this in boostrap-vue from the documentation. You can do it with vanilla js though:
<b-form-input id="range-1" v-model="value" type="number" onkeyup="parseNum(this)"></b-form-input>
let parseNum = function(scope){ //scope is 'this' which is html input element
if(parseInt(scope.value)>999) scope.value =9999 // check if too large
if(isNaN(parseInt(scope.value))) scope.value=1 // check if number
}
See this in action below:
let parseNum = function(scope){
if(parseInt(scope.value)>999) scope.value =9999
if(isNaN(parseInt(scope.value))) scope.value=1
}
const app = new Vue({
data() {
return {
value: '2'
}
},
}).$mount('#app');
<link href="https://unpkg.com/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue#2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.js"></script>
<div id="app">
<label for="range-1">Example range with min and max</label>
<b-form-input id="range-1" v-model="value" type="number" onkeyup="parseNum(this)"></b-form-input>
<div class="mt-2">Value: {{ value }}</div>
</div>
jsfiddle
I'm using bootsrap-vue.
It has a datepicker which after picking a date there is no way to make field clear.
<template>
<div>
<label for="datepicker-placeholder">Date picker with placeholder</label>
<b-form-datepicker id="datepicker-placeholder" placeholder="Choose a date" locale="en"></b-form-datepicker>
</div>
</template>
How can I clear the field?
You have two options.
Either bind a property to 's v-model, and then use JavaScript to reset the value of said property.
The other option is to use the reset-button prop, which adds a reset button to the datepicker popup which clears the selected date when clicked by default.
new Vue({
el: '#app',
data() {
return {
date: ''
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app" class="p-3">
<b-input-group>
<b-datepicker v-model="date" reset-button></b-datepicker>
<template #prepend>
<b-btn #click="date = ''">Clear</b-btn>
</template>
</b-input-group>
</div>
You should use v-model to accept the selected date and then clear it using JavaScript, it will be removed from date selection
I am using Vue-strap alert component with Vue.js. The alert box works fine, however, I am unable to auto close the alert box after specified duration. Here is the component code I am using.
<alert :show.sync="showAlert" placement="top" duration="3000" type="success" width="400px" dismissable>
<span class="icon-info-circled alert-icon-float-left"></span>
<strong>Success</strong>
<p>{{alertMessage}}</p>
</alert>
The alert box remains open and close on clicking the close (x) button. Here is a code pen that uses the alert component.
https://codepen.io/Taxali/pen/dKJpKY
Any suggestion, how to auto close the alert box after 3 seconds? Thanks.
According to source code, setTimeout(_, duration) is only set if show props is change.
So there is a workaround, you can toggle show from false to true in mounted methods, or you can use a button to toggle the alert.
Another way to setTimeout yourself in Vue component.
var vm = new Vue({
components: {
alert:VueStrap.alert,
},
el: "#app",
data: {
alertMessage:"Activity Saved Successfully.",
showAlert:false
},
mounted() {
this.showAlert = true
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.1.40/vue-strap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="app">
<alert :show.sync="showAlert" placement="top" :duration="3000" type="success" width="400px" dismissable >
<span class="icon-info-circled alert-icon-float-left"></span>
<strong>Success</strong>
<p>{{alertMessage}}</p>
</alert>
</div>
Given i have this
//mycompoent.js
Vue.component('main-nav',{
template:`
<div id="main-nav">
</div>
`
});
Vue.component('menu-nav',{
template:`
<div id="menu-nav">
</div>
`
});
new Vue({
}).$mount("#nav-app");
Then in my CSS I have the following
//style.css
#menu-nav{display:none;}
#media (max-width:840px){
#main-nav{display:none;}
#menu-nav{display:block;}
}
//index.html
<div id="nav-app">
<main-nav />
<menu-nav />
</div>
When I resize the browser less than 840px the menu-nav component never appears; I don't know what I have done wrong.
If you're testing this directly in the browser (without a compile step), you can't use the self-closing form <main-nav /> for components. Try the following:
<div id="nav-app">
<main-nav></main-nav>
<menu-nav></menu-nav>
</div>
I'm new to Vue.js and also do most work in a conventional LAMP environment.
The vue components tried so far don't seem to work linked in. Can anyone please:
Provide a sample process to install vue components in a legacy LAMP environment
Provide a simple html template showing how to load a vue component
Thanks for any tips.
Since you are in a legacy context, you probably won't use npm/webpack/babel. In this case, you'll import every package you need via <script> tags.
Process:
Look for the component you need
Check their docs for the steps needed to import them.
Usually it is a <script> tag (and a CSS <link> style) followed by some steps to configure (but not always).
In some rare cases the lib doesn't provide instructions for usage via <script>, in this case you can try using <script src="https://unkpg.com/NODE-PACKAGE-NAME"> and then see if it is possible to use it directly.
Examples:
Declaring your own <custom-comp> component and registering it globally via Vue.component.
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<custom-comp v-bind:myname="name"></custom-comp>
</div>
<template id="cc">
<p>I am the custom component. You handled me {{ myname }} via props. I already had {{ myown }}.</p>
</template>
<script>
Vue.component('custom-comp', {
template: '#cc',
props: ['myname'],
data() {
return {
myown: 'Eve'
}
}
});
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js',
name: 'Alice'
}
});
</script>
Using a third-party component that gives instructions on how to use without NPM. Example bootstrap-vue. How to use? Follow their instructions for each specific component. Demo of the Card Component below.
<script src="https://unpkg.com/vue"></script>
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-card title="Card Title"
img-src="https://lorempixel.com/600/300/food/5/"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
<p class="card-text">
Some quick example text to build on the card title.
</p>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
</div>
</div>
<script>
new Vue({
el: '#app'
});
</script>
Finally, using a third-party component that doesn't show any specific instructon on how to use without NPM. In the demo below we see the vue2-datepicker. They don't give specific instructions on how to use via <script>, but by looking at their readme, we see their component typically exports a DatePicker variable. Use then use <script src="https://unpkg.com/vue2-datepicker"> to load the component and register it for use via Vue.component('date-picker', DatePicker.default);. The need for .default varies. For other components, Vue.component('comp-name', ComponentName); (instead of ComponentName.default) directly could work.
// After importing the <script> tag, you use this command to register the component
// so you can use. Sometimes the components auto-register and this is not needed
// (but generally when this happens, they tell in their docs). Sometimes you need
// to add `.default` as we do below. It's a matter of trying the possibilities out.
Vue.component('date-picker', DatePicker.default);
new Vue({
el: '#app',
data() {
return {
time1: '',
time2: '',
shortcuts: [
{
text: 'Today',
start: new Date(),
end: new Date()
}
]
}
}
})
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue2-datepicker"></script>
<div id="app">
<div>
<date-picker v-model="time1" :first-day-of-week="1" lang="en"></date-picker>
<date-picker v-model="time2" range :shortcuts="shortcuts" lang="en"></date-picker>
</div>
</div>