Mask input birthday

I need to create a mask for birthdays. However, I don’t want to use any external extensions or plugins. I want to configure manually.

My code is working partially. It only accepts numbers. However, I need to insert the slash “/” automatically or recognize when the user types the slash.

My code currently looks like this:

`<input @keypress="isNumber($event)" placeholder="__/__/____"  type="text" maxlength="8">

var app = new Vue({
el: ‘#app’,

    methods: {
      isNumber: function(evt) {
          evt = (evt) ? evt : window.event;
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
            evt.preventDefault();;
          } else {
            return true;
          }
        }
    }
})

`

Can you help me create this mask?

Hi

Maybe you could use this: https://www.syncfusion.com/javascript-ui-controls/js-input-mask

I solved it this way:

<input @keypress="isNumber($event)" v-model="input_value" placeholder="__/__/____" type="text" maxlength="10" autofocus="autofocus">

    var app = new Vue({
     el: ‘#app’,
    input_value: '',
    methods: {
      isNumber: function(evt) {

              evt = (evt) ? evt : window.event;
              var charCode = (evt.which) ? evt.which : evt.keyCode;
              if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
                evt.preventDefault();
              } else {
                var v = this.input_value;
                     if (v.match(/^\d{2}$/) !== null) {
                this.input_value = v + '/';
                      } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
                          this.input_value = v + '/';
                     }
              }
            }
1 Like