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

Question

我有一个输入，用户可以在其中输入日期，在输入时我想将其值格式化为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>

这是我试过的过滤器，

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();
});

Answer 1

这里我根据字符串的长度创建一个掩码。当长度达到 2 时，应用第一个 /，当长度达到 4 时，应用第二个 /。然后您需要将输入限制为 8 个字符。

const createMask = string => {
  const length = string.length;
  const regex = /(\d{0,2})(\d{0,2})(\d{0,4})/;
	  if(length < 2){
	    return string;
	  }
	  if(length <= 3){
	    return string.replace(regex, "$1\/$2");
	  }
    return string.replace(regex,"$1\/$2\/$3");
}

console.log(createMask('12241990'))