限制日期选择器仅接受数字和连字符,并限制Vue中的其他值的方法
P粉729518806
P粉729518806 2023-08-26 14:57:04
[Vue.js讨论组]
<p>我正在使用vue2-datepicker npm包来处理日期。 日期输入接受所有字母、数字和特殊字符。 但我希望输入只接受数字、连字符和斜杠。 我可以轻松地使用普通的html输入来实现这一点。但是如何在日期选择器中实现呢? 任何帮助将不胜感激。 提前感谢</p> <p>我正在使用的npm链接。</p> <p>显示输入字段接受不同值的图像。</p> <p>这是我正在使用的标签和属性。</p> <pre class="brush:php;toolbar:false;">&lt;date-picker :placeholder=&quot;fieldItem.name&quot; v-model=&quot;fieldItem.value&quot; format=&quot;MM-DD-YYYY&quot; v-if=&quot;fieldItem.type == 'datePicker'&quot; type=&quot;number&quot; &gt;&lt;/date-picker&gt;</pre>
P粉729518806
P粉729518806

全部回复(1)
P粉023650014

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

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

示例

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号