Möglichkeit, die Datumsauswahl so einzuschränken, dass sie nur Zahlen und Bindestriche akzeptiert, und andere Werte in Vue einzuschränken

Question

Ich verwende das NPM-Paket vue2-datepicker, um Datumsangaben zu verarbeiten. Die Datumseingabe akzeptiert alle Buchstaben, Zahlen und Sonderzeichen. Ich möchte aber, dass die Eingabe nur Zahlen, Bindestriche und Schrägstriche akzeptiert. Ich kann dies leicht mit normaler HTML-Eingabe erreichen. Aber wie implementiert man es in der Datumsauswahl? Jede Hilfe wäre sehr dankbar. Vielen Dank im Voraus

Der NPM-Link, den ich verwende.

Zeigt ein Bild eines Eingabefelds, das verschiedene Werte akzeptiert.

Hier sind die Tags und Attribute, die ich verwende.

<date-picker
          :placeholder="fieldItem.name"
          v-model="fieldItem.value"
          format="MM-TT-JJJJ"
          v-if="fieldItem.type == 'datePicker'"
          type="Nummer"
        ></date-picker>

Answer 1

您可以使用作用域插槽来实现这一点：

<date-picker
  format='MM-DD-YYYY'
  value-type='format'
  v-model='time'>
  <template #input='{ props, events }'>
    <input
      v-bind='props'
      v-on='events'>
  </template>
</date-picker>

现在我们可以拦截输入事件并删除不需要的字符：

<date-picker
  format='MM-DD-YYYY'
  value-type='format'
  v-model='time'>
  <template #input='{ props, events }'>
  <input
    v-bind='props'
    v-on='{
      ...events,
      input: event => handleInput(event, events.input)
    }'>
  </template>
</date-picker>

...
  methods: {
    handleInput (event, update) {
      let value = event.target.value.replace(/[^0-9/-]/g, '')

      // 强制Vue在删除一些字符后刷新输入框
      this.$forceUpdate()

      // 将新值应用于让vue2-datepicker继续其流程
      update(value)
    }
  }
...

示例