Topic: Vue Date Picker - How to disable dates
I purchased yesterday the pro version for VUE + templates - wanted to use the date picker. I have several questions:
1/ I do not see how I can disable a several dates or range of dates. The jquery version seems to offer that. So how can I disable dates with the Vue date picker?
2/ I cannot understand from the API page how to set the "limits". This is very unclear. Can you give me an example on how to set a "minimum date" or how to set a max date or both?
3/ Also on the API page ... I do not understand how to "validation" and "isValid" settings works. Can you provide some examples?
The overview page should have a more complex example using several of the settings.
Thanks for your help
1/ Vue version doesn't support disabling single date. You can use an array of limits. But thank you for this suggestion - we will consider adding this in the future.
2/ Limits: https://mdbootstrap.com/docs/vue/forms/date-picker/#date-limits
<template>
<mdb-date-picker :limit="limit" label="limits example" />
</template>
<script>
import { mdbDatepicker } from 'mdbvue\;
export default {
data() {
return {
limit: [{
type: 'weekday',
available: [1, 2, 3, 4, 5]
},
{
type: 'fromto',
from: '2019-11-01',
to: '2019-11-20'
}],
}
}
}
</script>
3/ Here is an example of isValid property:
<template>
<form @submit.prevent="checkForm" novalidate>
<mdb-date-picker
v-model="validation.value"
:validation="validation.validated"
:isValid="validation.valid"
required
@change="validate()"
validFeedback="Look's good."
invalidFeedback="Please pick a date"
label="Validated date"
/>
<mdb-btn type="submit">Submit</mdb-btn>
</form>
</template>
<script>
import { mdbDatePicker, mdbBtn } from 'mdbvue';
export default {
name: 'DatePickerPage',
components: {
mdbDatePicker,
mdbBtn
},
methods: {
checkForm(event) {
event.target.classList.add("was-validated");
},
validate() {
if (this.validate.value) {
this.valid = true;
this.validated = true;
}
}
},
data() {
return {
validation: {
value: null,
valid: false,
validated: false
}
};
}
</script>
flamentch commented 5 years ago
Thank you Magdalena. I will try the samples you gave me.
And yes please consider adding disabling date(s) feature since this feature is in the JQuery version and I purchased the Pro version with the mind of implementing it.
I've got the same experience when purchased MDBVue-Pro having in mind implementing some features of JQuery version and missing them in Vue. As somebody from MDB explained, MDBVue is a younger sister of JQuery and Vue is missing some features/functionality. Asking for money refund didn't work. Magdalena, wouldn't it be more honest to declare the fact of some missing features before customers buy MDBVue-Pro, so that wouldn't be a surprise for them later???
Magdalena Dembna staff premium commented 5 years ago
MDB Vue Pro has its own documentation with an API tab for each component - in case you've missed it, here's the link: https://mdbootstrap.com/docs/vue/ . You can also see our demo app: https://vue.mdbootstrap.com . As those are two separate products, they have separate documentation - if some feature is not yet present in Vue version it won't be there. As for disabling dates, @flamentch, I have already added this idea to our list. Kind regards, Magdalena
Rishabh G commented 5 years ago
Is there a way to do this in React? Please help...
Magdalena Dembna staff premium commented 5 years ago
@Rishabh G you need to create a separate topic in the React category ( https://mdbootstrap.com/support-ask-question/ ) and wait for our React team to respond. Best regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.0.0
- Device: Mac
- Browser: Chrome
- OS: 10.14
- Provided sample code: No
- Provided link: No