Vue-material: flatpickr date picker broken due to md-input-container font size

[hanxue]

The following code is broken, and the selected date is not displayed:

<main id="app">
  <h1>
   Vue flatpickr in vueMaterial
  </h1>
  <md-input-container>
  <flat-pickr v-model="projectDeadline" input-class="md-input" style="font-size:16px!important">
    </flat-pickr>
  </md-input-container>

  <hr> v-model: {{projectDeadline}}
</main>

jsfiddle link

The date will only be displayed in <md-input> if <md-input-container> is replaced with a <div>

<div class="md-input-container md-theme-default md-has-value">
    <md-icon>schedule</md-icon>
    <label>Project Deadline</label>
    <flat-pickr v-model="projectDeadline" input-class="md-input" placeholder="Select a date">
    </flat-pickr>
  </div>

jsfiddle link

An alternative is to set the font size:

<flat-pickr v-model="projectDeadline" input-class="md-input" style="font-size:16px!important">

jsfiddle link

There seems to be CSS issue with the font-size

Reference: https://github.com/ankurk91/vue-flatpickr-component/issues/28#issuecomment-335015538

[EricTran5791]

I don't think you need to use md-input-container because you're not using md-input, md-autocomplete, or md-textarea.

[hanxue]

@EricTran5791 thanks for looking at this issue. Although <flat-pickr> is a custom component, it is a type of <input>. If I don't nest it in <md-input-container>, this is how it will look like

This is the rendered HTML output:

<input class="md-input flatpickr-input form-control input active" placeholder="" type="text" readonly="readonly">

[zapping]

Since you are not using <md-input> of vue-material the <md-input-container> cannot process or check the value inside its child. As a work around try setting the container with the class statically like this

  <md-input-container  class="md-has-value">
  <flat-pickr v-model="projectDeadline" input-class="md-input">
    </flat-pickr>
  </md-input-container>

[hanxue]

@zapping Adding class="md-has-value" works! Thank you for your explanation

[SergioReis97]

For others that might land here.

<md-input-container :class="myDate ? 'md-has-value' : ''">
   <label>Date</label>
   <flat-pickr :inputClass="'md-input'" v-model="myDate" ></flat-pickr>
</md-input-container>

Adding the ternary expression to class makes so that the pretty effect of the label going up happens with the change of the date

[waratah]

Although not entirely relevant, just referencing implement data picker task for other searchers through issues:

https://github.com/vuematerial/vue-material/issues/4 . - implement date picker

[Samuell1]

Closing this issue as our focus is on the new 1.0.0 version.

https://vuematerial.io/components/datepicker/