V-calendar: Masked input

[ezhkov]

Is it possible to implement date mask inside input field for the datepicker?

[EricMcRay]

You can use custom input for your any special need. Check the docs.

https://docs.vcalendar.io/datepicker.html#using-custom-slot

[ezhkov]

Yes, I know that. But it doensn't recognize v-calendar date format.
Input with masked plugin works well with it's own v-model
V-calendar works well with it's own v-model
But they don't work together, when I use v-calendar's model for text input

[nathanreyes]

I'm not sure I understand the problem completely. I just updated the docs today to elaborate on the options you can use when calling updateValue in your own input.

If this doesn't lead to an answer, would you mind reproducing the bug? I started a fiddle for this issue.

[kl3sk]

I have the same problem.
I tried @nathanreyes docs exemple, and it works perfectly in a normal <input /> element.

But like @ezhkov even if vue-masked-input do it's job perfectly, i can't send event @change/@input to it.

Edit: (Why do i found my solutions just 10 min after opening an issue ^^)

<mask-input
   class='form-control'
   :value='inputValue'
   mask='11/11/1111'
   slot-scope='{ inputValue, updateValue }'
   @change='updateValue($event, { formatInput: true, hidePopover: false })'
   @input='updateValue($event, { formatInput: false, hidePopover: false })'
></mask-input>

I don't understand why but $event is enought rather than $event.target.value

[ezhkov]

Thank you. Your example works perfectly. It seems I didn't understand scope idea completely.
I forked your example and integrated it with Cleave.js, if anyone else will get the same problem.

https://jsfiddle.net/3wtt9r83/

[ryanulit]

How do you get the calendar popover to move to a new date that is updated while the popover is open? The fiddle above does not account for that case.