Custom input

• Using custom-input prop

<input
  type="text"
  class="custom-input"
  placeholder="select date"
/>
<span>date = {{ date }}</span>

<date-picker
  v-model="date"
  format="YYYY-MM-DD"
  display-format="jYYYY-jMM-jDD"
  custom-input=".custom-input"
/>

export default {
  data() {
    return {
      date: ''
    }
  }
}

date =

• Method B: Using element prop (deprecated)

show example

<input
  id="my-custom-input"
  v-model="date"
  type="text"
  class="form-control"
  placeholder="select date"
/>

<date-picker
  v-model="date"
  format="jYYYY/jMM/jDD"
  element="my-custom-input"
/>

export default {
  data() {
    return {
      date: ''
    }
  }
}

WARNING

element does not support display-format.

please use custom-input.

Custom editable input

<button type="button" class="btn btn-primary" @click="show = true">
  Show Datepicker
</button>

<input
  id="my-custom-editable-input"
  type="text"
  placeholder="YYYY/MM/DD"
/>

<date-picker
  v-model="date"
  :show="show"
  :editable="true"
  format="YYYY-MM-DD"
  display-format="jYYYY/jMM/jDD"
  custom-input="#my-custom-editable-input"
  @close="show=false"
/>

export default {
  data() {
    return{
      date: '',
      show: false
    }
  }
}

date =