Как принять более короткий пользовательский ввод в Element UI DatePicker?

В существующей кодовой базе были обновлены пакеты ElementUI и Vue2. Пользователи полагаются на непреднамеренное поведение устаревшего компонента пользовательского интерфейса DatePicker.

Дата визуально отформатирована как 30/01/2022 в поле ввода элементов DatePicker. Для ускорения набора пользователи вместо этого вводили 30012022 в поле. Такое поведение исчезло после обновлений. Принимается только ввод даты с разделителем /.

Как перезаписать методы поставщика компонента ElementUI Date Time, чтобы упростить проверку ввода?

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
13
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Gif shows the behavior of entering partial dates

Заменить валидацию можно, поместив el-date-picker в свой собственный компонент. Хитрость заключается в том, чтобы использовать $nextTick внутри mounted(), а затем получить доступ к методу, который вы хотите заменить, через Справка в обернутом компоненте.

Небольшой пример кода файла .vue с использованием TypeScript:

<template>
  <el-date-picker
    ref="customDatePicker"
    :type="type"
    :size="size"
    :value="value"
    :clearable="clearable"
    :format="displayFormat"
    :value-format="valueFormat" />
</template>

<script lang="ts">
import moment from 'moment'
import { Component, Prop, Vue } from 'vue-property-decorator'

type PickerType = 'year' | 'month' | 'date' | 'dates' | 'datetime' | ' week' | 'datetimerange' | 'daterange' | 'monthrange'
type Size = 'large' | 'small' | 'mini'

@Component
export default class RexDatePicker extends Vue {
  @Prop()
  readonly value: any

  @Prop({ type: String, default: 'small' })
  readonly size!: Size

  @Prop({ type: String, default: 'date' })
  readonly type!: PickerType

  @Prop({ type: String, default: 'yyyy-MM-dd' })
  readonly valueFormat!: string

  data() {
    return {
      clearable: this.$attrs.clearable !== 'false'
    }
  }

  get displayFormat() : string {
    if (this.type === 'year') {
      return 'yyyy'
    }
    return 'dd/MM/yyyy'
  }

  mounted() {
    this.$nextTick(() => {
      var elPicker: any = this.$refs.customDatePicker
      if (this.type === 'date' || this.type === 'daterange') {
        // inject custom date input behavior
        const originalParseFunction = elPicker.parseString
        elPicker.parseString = function (value) {
          value = expandNumbersToDate(value)
          return originalParseFunction(value)
        }
      }
    })
  }
}

function expandNumbersToDate(value) {
  // expects String, Date or an Array of those two
  if (Object.prototype.toString.call(value) === '[object String]') {
    var currentMonth = moment().format('MM')
    var currentYear = moment().format('YYYY')
    value = value.replace(/^[^\d]*(\d{2})[^\d]*$/, `$1/${currentMonth}/${currentYear}`)
    value = value.replace(/^[^\d]*(\d{2})(\d{2})[^\d]*$/, `$1/$2/${currentYear}`)
    value = value.replace(/^[^\d]*(\d{2})\/?(\d{2})\/?(\d{4})[^\d]*$/, '$1/$2/$3')
  }
  if (Array.isArray(value)) {
    value = value.map(date => expandNumbersToDate(date))
  }
  return value
}
</script>

Другие вопросы по теме