Vue Date Picker - How to disable dates - Material Design for Bootstrap

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

Add comment

Magdalena Dembna staff answered 4 years ago

1 0 Best answer

<p>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.</p>

<p>2/ Limits: <a href="https://mdbootstrap.com/docs/vue/forms/date-picker/#date-limits" target="_blank">https://mdbootstrap.com/docs/vue/forms/date-picker/#date-limits</a></p>

<pre class="prettyprint"><code><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>
</code></pre>

<p>3/ Here is an example of <code>isValid</code> property:</p>

<pre class="prettyprint"><code><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>
</code></pre>

Please insert min. 20 characters.

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

Please insert min. 15 characters.

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 ( https://mdbootstrap.com/support-ask-question/ ) and wait for our React team to respond. Best regards, Magdalena

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

flamentch

5Support score
1Questions 0Answers 0Snippets