Topic: Vue Date Picker - How to disable dates

flamentch free asked 4 years ago

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

Magdalena Dembna staff answered 4 years ago

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:

    <mdb-date-picker  :limit="limit" label="limits example" />
        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'

3/ Here is an example of isValid property:

    <form @submit.prevent="checkForm" novalidate>
                validFeedback="Look's good."
                invalidFeedback="Please pick a date"
                label="Validated date"
         <mdb-btn type="submit">Submit</mdb-btn>
import { mdbDatePicker, mdbBtn } from 'mdbvue';
export default {
  name: 'DatePickerPage',
  components: {
  methods: {
    checkForm(event) {"was-validated");
    validate() {
      if (this.validate.value) {
        this.valid = true;
        this.validated = true;
  data() {
    return {
      validation: {
        value: null,
        valid: false,
        validated: false

flamentch free commented 4 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.

peterwebaika-com free commented 4 years ago

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 commented 4 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: . You can also see our demo app: . 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 free commented 4 years ago

Is there a way to do this in React? Please help...

Magdalena Dembna staff commented 4 years ago

@Rishabh G you need to create a separate topic in the React category ( ) and wait for our React team to respond. Best regards, Magdalena

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: 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