MDBVUE 4 Datepicker

Topic: MDBVUE 4 Datepicker

softpyramid premium asked 1 year 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 1 year 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!

Add comment

softpyramid premium answered 1 year ago

0 0 Best answer

      <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 1 year 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!

<p>Here's how we made validation example:</p>

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

<hr>

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

<p>Keep coding!    </p>

Please insert min. 15 characters.

Add comment

softpyramid premium answered 1 year ago

0 0 Best answer

Please insert min. 20 characters.

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 1 year 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!

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

softpyramid

Premium support 20Support score
3Questions 3Answers 0Snippets