Is JQUERY inputmask can add string for datetime?

Question

Code for masking the time (HH:mm:ss)

$('.time').each(function () { 
        $(this).inputmask({
                mask: "h:s:s",
                placeholder: "00:00:00",
                alias: "datetime",
                hourFormat: "24"
        }); 
});

How to mask a datetime which also accept a string like NONE? Can type a text but only None value is valid NONE or 01:00:00

I'm using the jquery inputmask library(https://github.com/RobinHerbots/jquery.inputmask).

greenseed · Accepted Answer · 2017-01-26 03:06:20Z

2

You should not use alias and mask since you are not declaring a alias but simply calling inputmask() with options.

Here is the solution with commented explanations.

$('.time').inputmask({
    mask:'(h:s:s)|(X)', // X will define our new validator , | mean OR 
    definitions: {
        "X": {
            // Needed since you need the word(NONE) comparaison
            validator: function(chrs) {return chrs.toUpperCase().localeCompare('NONE')==0 },
            cardinality: 4, // Mean 1 instance of our new validator(X) has a value of 4 chars
            prevalidator: [
                {validator: function(chrs){return chrs.toUpperCase().localeCompare('N')==0 },cardinality:1},
                {validator: function(chrs){return chrs.toUpperCase().localeCompare('NO')==0 },cardinality:2},
                {validator: function(chrs){return chrs.toUpperCase().localeCompare('NON')==0 },cardinality:3}
            ],
            casing: "upper" // All chars will be casted as UPPER but not during our custom validation
        }
    }
})

With death metal in it :)

$('.time').inputmask({
    mask:'(h:s:s)|(X)', // X will define our new validator , | mean OR 
    regex: Inputmask().opts.aliases.datetime.regex, //Needed for the imported validator
    placeholder: "00:00:00", //To get 00:00:00 in place __:__:__
    hourFormat: "24", // or 12
    definitions: {
        "h": Inputmask().opts.aliases.datetime.definitions.h, // first char > 2 will become 09:
        "s": Inputmask().opts.aliases.datetime.definitions.s, //first char for minute/second if > 5 become 09
        "X": {
            // Needed since you need the word(NONE) comparaison
            validator: function(chrs) {return chrs.toUpperCase().localeCompare('NONE')==0 },
            cardinality: 4, // Mean 1 instance of our new validator(X) has a value of 4 chars
            prevalidator: [
                {validator: function(chrs){return chrs.toUpperCase().localeCompare('N')==0 },cardinality:1},
                {validator: function(chrs){return chrs.toUpperCase().localeCompare('NO')==0 },cardinality:2},
                {validator: function(chrs){return chrs.toUpperCase().localeCompare('NON')==0 },cardinality:3}
            ],
            casing: "upper" // All chars will be casted as UPPER but not during our custom validation
        }
    }
})

edited Jan 26, 2017 at 3:06

answered Jan 25, 2017 at 3:04

greenseed

5295 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mrrsb Over a year ago

Woah it works! your the man sir greenseed! would it possible to have the same behavior like in datetime when you type it automatically adds 00:00 in 24hrs?

greenseed Over a year ago

i am not sure what exactly you asking , you wan 00:00 in place of __:__ or you wan 08:__ when user type in 8 as first key. Look here https://github.com/RobinHerbots/Inputmask/blob/3.x/js/inputmask.date.extensions.js#L224 maskset is the current display so just play with it inside prevalidator

mrrsb Over a year ago

Uhm both? at first its 00:00 instead of : and when user type in 8 first it become 08:00

greenseed Over a year ago

look at what happen to maskset here line 224 , this is the code doing 20 when user input 2 as first char for year input , maskset is what the user see in the input

mrrsb Over a year ago

I see.. but dont have that eyes as yours sir.. meaning no idea how to add it to the code. Its a really big help if you can update the answer :)

|

Collectives™ on Stack Overflow

Is JQUERY inputmask can add string for datetime?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related