Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$(".data").mask("AB/CD/0000", {
translation:{
A: {pattern: /[0-3]/},
B: {pattern: /[0-9]/},
C: {pattern: /[0-1]/},
D: {pattern: /[0-9]/},
},
onKeyPress: function(a, b, c, d) {
if (!a) return;
var m = a.match(/(\d{2})/g);
d.translation.B = (m[0] && m[0].charAt(0)=='3') ? { pattern: /[0-1]/ } : { pattern: /[0-9]/ };
d.translation.D = (m[1] && m[1].charAt(0)=='1') ? { pattern: /[0-2]/ } : { pattern: /[0-9]/ };
c.mask("AB/CD/0000", d);
}
}).keyup();
@MakssYurkovskiy

This comment has been minimized.

Copy link

@MakssYurkovskiy MakssYurkovskiy commented Apr 5, 2017

At me partially does not work.
You can enter the date 39/18/2017 which is not correct.

@caueSantos

This comment has been minimized.

Copy link

@caueSantos caueSantos commented Jun 16, 2017

A little fix!
I think it's not the best approach, but for a while seems useful!

$('[data-format="date"]').mask("AB/CD/0000", {
        translation:{
            A: {pattern: /[0-3]/},
            B: {pattern: /[0-9]/},
            C: {pattern: /[0-1]/},
            D: {pattern: /[0-9]/},
        },
        onKeyPress: function(a, b, c, d) {

            if (!a) return;

            var m = a.match(/(\d{1})/g)

            if(!m)return;

            if(parseInt(m[0]) === 3){
                d.translation.B.pattern = /[0-1]/;
            }else{
                d.translation.B.pattern = /[0-9]/;
            }
            if (parseInt(m[2]) === 1){
                d.translation.D.pattern = /[0-2]/;
            }else{
                d.translation.D.pattern = /[0-9]/;
            }

            //unmask the input to apply a new mask
            c.unmask().mask("AB/CD/0000", d);

            //update the input value with itself cause
            //when we unmask and mask again
            //the caret bugs, so replacing the value
            //the cursor goes to end like expected
            c.val(c.val());

        }
    }).keyup();
@g4rcez

This comment has been minimized.

Copy link

@g4rcez g4rcez commented Dec 30, 2017

I fixed the bug of caueSantos in cursor, just add 3 lines on the same code

$('[data-format="date"]')
	.mask('AB/CD/0000', {
		translation: {
			A: { pattern: /[0-3]/ },
			B: { pattern: /[0-9]/ },
			C: { pattern: /[0-1]/ },
			D: { pattern: /[0-9]/ }
		},
		onKeyPress: function(a, b, c, d) {
			if (!a) return;
			let m = a.match(/(\d{1})/g);
			if (!m) return;
			if (parseInt(m[0]) === 3) {
				d.translation.B.pattern = /[0-1]/;
			} else {
				d.translation.B.pattern = /[0-9]/;
			}
			if (parseInt(m[2]) == 1) {
				d.translation.D.pattern = /[0-2]/;
			} else {
				d.translation.D.pattern = /[0-9]/;
			}
			let temp_value = c.val();
			c.val('');
			c.unmask().mask('AB/CD/0000', d);
			c.val(temp_value);
		}
	})
	.keyup();
@myrzan

This comment has been minimized.

Copy link

@myrzan myrzan commented Jul 19, 2018

Thank you.

@artheadsgames

This comment has been minimized.

Copy link

@artheadsgames artheadsgames commented Mar 29, 2019

Hi fellows, can you show how to validate phone numbers?

@benfiratkaya

This comment has been minimized.

Copy link

@benfiratkaya benfiratkaya commented Feb 21, 2020

You can use for credit card expiry date

if (typeof $.fn.mask === "function") {
  $('[data-format="card-expiry-date"]')
    .mask("AB/CD", {
      translation: {
        A: { pattern: /[0-9]/ },
        B: { pattern: /[0-9]/ },
        C: { pattern: /[2-9]/ },
        D: { pattern: /[0-9]/ }
      },
      onKeyPress: function(a, b, c, d) {
        if (!a) return;
        let m = a.match(/(\d{1})/g);
        if (!m) return;
        if (parseInt(m[0]) === 0) {
          d.translation.B.pattern = /[1-9]/;
        } else if (parseInt(m[0]) === 1) {
          d.translation.B.pattern = /[0-2]/;
        } else if (parseInt(m[0]) > 1) {
          c.val("0" + m[0] + "/");
        } else {
          d.translation.B.pattern = /[0-9]/;
        }
        let temp_value = c.val();
        c.val("");
        c.unmask().mask("AB/CD", d);
        c.val(temp_value);
      }
    })
    .keyup();
}

For example:
2/23 => 02/23
Min value: 01/20
Max value: 12/99

@rogeriocsilva

This comment has been minimized.

Copy link

@rogeriocsilva rogeriocsilva commented May 8, 2020

@benfiratkaya thanks 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment