Как прикрутить маску ввода к ант-дизайновскому (или аналогичному) датапикеру на Vue.js?

Question

Всем привет! Есть ли у кого-нибудь опыт прикручивания маски ввода к ант-дизайновскому датапикеру https://www.antdv.com/components/date-picker (или аналогичному датапикеру) ? Нужно, чтобы после ввода строки, она преобразовывалась в дату, например "1111111" -> "11.11.1111"

Проблема в том, что никак не удается в данном датапикере перехватить событие ввода с клавиатуры: keyup, keydown, keypress, ничего не работает:( - и, вследствие этого, не удается достать и отформатировать эту строку в дату и тд. А при уходе курсора с компонента или нажатия Enter, такая строка просто сбрасывается в текущую дату.

Удается вытащить строку только немыслимыми костылями вроде document.addEventListener('keypress', function(){}) и потом попытаться понять, где же именно произошел keypress, но я надеюсь и верю, что есть способ лучше.

P.S: Или посоветуйте, пожалуйста, другой датапикер, где вам удавалось сделать работающую таким образом маску ввода?

Answer 1

В общем если кому интересно, то это проблема решается через свойство format https://www.antdv.com/components/date-picker/#components-date-picker-demo-date-format

--- dateFormat.ts ---

// список форматов ввода даты в datepicker
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY', 'DD.MM.YYYY', 'DD.MM.YY', 'DDMMYYYY', 'DDMMYY'];
export default dateFormatList;

--- demo.ts ---

<template>
    <a-date-picker
         v-decorator="['date']"
         v-model="date"
         locale="ru-RU"
         :format="dateFormatList"
         valueFormat="YYYY-MM-DD 00:00:00"
         placeholder="ДД.ММ.ГГГГ"
     />
</template>

 import { Component, Vue } from 'vue-property-decorator';
 import dateFormatList from '../constants/dateFormat';

@Component
export default class Demo extends Vue {
   dateFormatList: any = dateFormatList;
}

БЛОГ НА HUSL

Как прикрутить маску ввода к ант-дизайновскому (или аналогичному) датапикеру на Vue.js?

Ответы (1 шт):