I'm trying to apply a mask to a VueDatePicker input. The mask works, but you need to double-click on the date in the calendar for it to apply. However, if you remove the mask, everything will be fine. But I need the ability to enter numbers like 10102020 so that the aole is filled in as 10.10.2020

<VueDatePicker
    v-model="model"
    v-maska:[datemask]
    model-type="dd.MM.yyyy"
    type="date"
    format="dd.MM.yyyy"
    auto-apply
    locale="ru"
    placeholder="дд.мм.гггг"
    :enable-time-picker="false"
    :text-input="{ format: 'dd.MM.yyyy' }"
  />

my datemask

const datemask = reactive({
    mask: '##.##.####',
    eager: false,
});

I tried to achieve this with :text-input="{ format: 'dd.MM.yyyy' }" but it didn't help, I need a mask. I really don't want to use anything other than VueDatePicker because I'll have to change it in a lot of places

I'm trying to apply a mask to a VueDatePicker input. The mask works, but you need to double-click on the date in the calendar for it to apply. However, if you remove the mask, everything will be fine. But I need the ability to enter numbers like 10102020 so that the aole is filled in as 10.10.2020

<VueDatePicker
    v-model="model"
    v-maska:[datemask]
    model-type="dd.MM.yyyy"
    type="date"
    format="dd.MM.yyyy"
    auto-apply
    locale="ru"
    placeholder="дд.мм.гггг"
    :enable-time-picker="false"
    :text-input="{ format: 'dd.MM.yyyy' }"
  />

my datemask

const datemask = reactive({
    mask: '##.##.####',
    eager: false,
});

I tried to achieve this with :text-input="{ format: 'dd.MM.yyyy' }" but it didn't help, I need a mask. I really don't want to use anything other than VueDatePicker because I'll have to change it in a lot of places

• vue.js
• vuetify.js
• masking
• vuepic-vue-datepicker

1 Answer 1

The format in :text-input prop can be an array of formats or even a custom parse function (see docs for text-input-configuration):

• format: Override the default parsing format. Default is the string value from format. You can also pass multiple parser patterns or a custom parser function and parse the input yourself. When the input is focused, the date will be shown in this format.

So you don't actually need a mask, you can just add another format:

<VueDatePicker
  :text-input="{ format: [
    'dd.MM.yyyy', 
    'ddMMyyyy', // <--- for input like '30122024'
  ] }"
/>

Here it is in a snippet:

const { createApp, ref } = Vue;

const App = { 
  components: {
    VueDatePicker: window.VueDatePicker
  },
  template: `
    <VueDatePicker
      v-model="model"
      model-type="dd.MM.yyyy"
      type="date"
      format="dd.MM.yyyy"
      :enable-time-picker="false"
      :text-input="{ format: [
        'dd.MM.yyyy', 
        'ddMMyyyy'
      ] }"
    />
    
    {{ {model} }}
  `,
  data() {
    return {
      model: '20.12.2025'
    }  
  }
}
const app = createApp(App)
app.mount('#app')

<div id="app"></div>
<script src="https://unpkg/vue@3/dist/vue.global.js"></script>
<script src=" https://cdn.jsdelivr/npm/@vuepic/[email protected]/dist/vue-datepicker.iife.js "></script>
<link href=" https://cdn.jsdelivr/npm/@vuepic/[email protected]/dist/main.min.css " rel="stylesheet">
<script src=" https://cdn.jsdelivr/npm/[email protected]/cdn.min.js "></script>

If you want to use a mask after all, you probably have to set it on the input itself, not the VueDatePicker component. You can do this using the dp-input slot.