限制日期選擇器僅接受數字和連字符，並限制Vue中的其他值的方法

Question

我正在使用vue2-datepicker npm套件來處理日期。 日期輸入接受所有字母、數字和特殊字元。 但我希望輸入只接受數字、連字號和斜線。 我可以輕鬆地使用普通的html輸入來實現這一點。但是如何在日期選擇器中實現呢？ 任何幫助將不勝感激。 提前感謝

我正在使用的npm連結。

顯示輸入欄位接受不同值的影像。

這是我正在使用的標籤和屬性。

<date-picker
          :placeholder="fieldItem.name"
          v-model="fieldItem.value"
          format="MM-DD-YYYY"
          v-if="fieldItem.type == 'datePicker'"
          type="number"
        ></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)
    }
  }
...

範例