Un moyen de restreindre le sélecteur de date pour n'accepter que les chiffres et les traits d'union, et de restreindre d'autres valeurs dans Vue

Question

J'utilise le package npm vue2-datepicker pour gérer les dates. La saisie de la date accepte toutes les lettres, chiffres et caractères spéciaux. Mais je veux que l'entrée n'accepte que les chiffres, les traits d'union et les barres obliques. Je peux facilement y parvenir en utilisant une entrée HTML normale. Mais comment l’implémenter dans le sélecteur de date ? Toute aide serait grandement appréciée. Merci d'avance

Le lien npm que j'utilise.

Affiche une image d'un champ de saisie acceptant différentes valeurs.

Voici les balises et attributs que j'utilise.

<sélecteur de date
          :placeholder="fieldItem.name"
          v-model="fieldItem.value"
          format="MM-JJ-AAAA"
          v-if="fieldItem.type == 'datePicker'"
          type="numéro"
        ></date-picker>

Answer 1

Vous pouvez utiliser des emplacements de scope pour y parvenir :

<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>

Nous pouvons désormais intercepter les événements d'entrée et supprimer les caractères indésirables :

<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)
    }
  }
...

Exemple