Topic: MDBVUE 4 Datepicker

softpyramid premium asked 2 years ago


I'm using MDBVue 4 PRO (NOT version 5) and I wasn't able to find the code in the documentation to replicate the Basic example shown on this page.

https://mdbootstrap.com/previews/templates/vue/#/forms/pro/datepicker/

I'm using the single line input fields and need to match that for the date. I also like the ability to click anywhere in the field and activate the popup date-picker without having to find and click on an icon on the far right.

Can anyone supply the code to do this?

Also if there's anyway to insert the date when the date is clicked on without having to hit OK that would be great!


Mikołaj Smoleński staff commented 2 years ago

Here's the code:

        <mdb-date-picker-2 v-model="date" label="Basic example" title="Select date" />

As the component is using v-model, you can edit it's value any time and it should handle this change.

Keep coding!


softpyramid premium answered 2 years ago


      <mdb-date-picker v-model="sign_date" icon="calendar" label="Select a Signature Date" required data-date-format="mm/dd/yy" :todayButton="true"></mdb-date-picker>

In this example everything works EXCEPT the required property doesn't throw the error icon if left empty in the way that other MDB Input fields do.

Is this a bug or a change in the way the required property is implemented for this component?


Mikołaj Smoleński staff commented 2 years ago

Here's how we made validation example:

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

methods: {
   validate() {
      console.log(this.validation.value);
      if (this.validation.value) {
        this.validation.valid = true;
        this.validation.validated = true;
      } else {
        this.validation.valid = false;
      }
    },
  },
  data() {
    return {
      validation: {
        value: null,
        valid: false,
        validated: false
      },
    };
}

Keep coding!


softpyramid premium answered 2 years ago


This is what I already have and does not do any of what I asked so I will repeat the question a different way:

On this page https://mdbootstrap.com/previews/templates/vue/#/forms/pro/datepicker/on the BASIC example

1) I want the single line material design field - not the 4 sided field design in the example you provided.2) I also want to be able to click anywhere on the field as seen here and popup the calendar. IN the example you provided I have to click on the date icon which is not the typical expectation of someone completing the date field.

The BASIC example shown in the link provided does these things and I'm asking if you could please provide the full source code for that example including any style/script components necessary. Thank you


Mikołaj Smoleński staff commented 2 years ago

Ok, so what you want is actually an old one picker without outline styling. The code will be similar, but you will have to import mdb-date-picker instead of mdb-date-picker-2:

<mdb-date-picker v-model="date" label="Basic example"/>

Keep coding!



Please insert min. 20 characters.

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: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 1.13.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes