Как отформатировать входное значение в ДД / ММ / ГГГГ, используя Javascript - PullRequest
Новая
       24

Как отформатировать входное значение в ДД / ММ / ГГГГ, используя Javascript

0 голосов
/ 20 июня 2019

У меня есть ввод, где пользователь может вводить дату, и при наборе я бы хотел отформатировать ее значение до 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();
});

1 Ответ

0 голосов
/ 20 июня 2019

Здесь я создаю маску на основе длины строки.Когда длина достигает 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'))
...