如何使用Javascript将输入值格式化为DD/MM/YYYY

我有一个输入，用户可以在其中输入日期，并且在键入时我希望将其值格式化为

DD/MM/YYYY

。因此，当输入值与所需格式匹配时，我希望限制用户键入

<template>
  <input v-model="dob" @input="handleInput">
</template>

<script>
export default {
  data() {
    return {
      dob: ""
    };
  },
  methods: {
    handleInput(e) {
      let value = e.target.value;
      this.dob = this.$options.filters.formatTo(value, "date");
    }
  }
};
</script>

---

在这里，我根据字符串的长度创建一个掩码。当长度达到2时，应用第一个

/

，当长度达到4时，应用第二个

/

。然后您需要将输入限制为8个字符

const createMask=string=>{
常量长度=string.length；
常量正则表达式=/（\d{0,2}）（\d{0,2}）（\d{0,4}）/；
如果（长度<2）{
返回字符串；
}
如果（长度您尝试了什么…？@sajahan updatedCheckout@Ace我想在键入时格式化它，例如，在键入day后自动添加
/
，在键入Month后添加第二个
/
。在用户键入时修改用户输入会带来糟糕的用户体验，并且需要您编写大量代码以实现零有用功能nality。只需让用户输入日期，不要用你认为很酷的东西纠缠他们，他们可能会觉得很烦人。谢谢，我也尝试过这个解决方案，但当在第一个斜杠或第二个斜杠后单击backspace时，它就不能按预期工作。例如：在
12/
或
12/05/
之后。可能需要做一些技巧隐藏真实输入并显示隐藏的输入。或者只是尝试一次，如果用户键入“2/7/2019”，会发生什么？大多数用户在键入时都会看着键盘，尤其是在移动设备上，他们可能会惊讶于当他们回头看输入时会遇到什么。；-）当然可以，但这不一定是人们键入的内容。UI应该是有帮助的、友好的，而不是规定性的和烦人的。@Naresh您对本机日期输入有什么反对意见吗？
Vue.filter('formatTo', function(value, format) {
  const formats = {
    date: {
      blocks: [2, 2, 4],
      delimeter: '/'
    }
  };

  if (!value || !(format in formats)) return;

  const { blocks, delimeter } = formats[format];
  const numberOfBlocks = blocks.length - 1;
  const maxLength = numberOfBlocks + blocks.reduce((a, b) => a + b, 0);
  let index = -1;

  value = value.toString().split('');

  blocks.map(block => {
    index += block + 1; // here +1 is for delimeter
    value.splice(index, 0, delimeter);
  });

  // remove excess values
  value.length = value.length > maxLength ? maxLength : value.length;

  return value.join('').trim();
});