我正在使用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> Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您可以使用作用域插槽来实现这一点:
<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) } } ...示例