JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<label for="" class="container--form">
      <span>Tanggal lahir</span>
      <input
        type="text"
        maxlength="2"
        placeholder="dd"
        @keyup="change($event)"
        @keypress="isNumber($event)"
      >/
      <input
        type="text"
        maxlength="2"
        placeholder="mm"
        @keyup="change($event)"
      >/
      <input
        type="text"
        maxlength="4"
        placeholder="yyyy"
      >
    </label>

JavaScript

export default {
  methods: {
    change(e) {
      const lengthVal = e.target.value.length;
      // console.log(e);
      if (lengthVal === 2) {
        e.target.nextElementSibling.focus();
      } else if (lengthVal === 1) {
        this.$emit('keyup', (`0${e.target.value}`).slice(-2));
        // console.log(str1.padStart(2, '0'));
        // alert(e.target.value.padStart(2, '0'));
      }
    },
    isNumber(event) {
      if (event.keyCode > 31 && (event.keyCode < 48 || event.keyCode > 57)) {
        event.preventDefault();
        return false;
      }
      return true;
    },
  },
};