Specify date format in mask when using an input mask?

Question

I've been using the jquery masked input plugin to apply a date mask to text inputs. This works pretty well, but I want the displayed mask to also show the format. That is, instead of the mask being

__/__/____

I want to be able to specify the format by using a mask of, for example,

dd/mm/yyyy

or (which looks the same with the current mask but is fundamentally different)

mm/dd/yyyy

I can't see how to do this with that plugin (it only accepts one character as the mask character as far as I can see). Is it possible with the current plugin? Does anyone know of an alternative plugin (ideally using jQuery) which can do this? I haven't been able to find anything.

Think this through a bit better. Suppose you could use dd/mm/yyyy and then someone types in 29/02/200 (last digit not yet typed in). What should the plugin do for the final digit? Reject all inputs except 0, 4 and 8 without providing feedback? There are lots of examples on this theme. — Jon
– Jon, Commented Jan 17, 2012 at 15:01
Yes, you could validate the date with the mask plugin too - but can you give me an example of a plugin that does this (and has the other behaviour of the mask plugin, such as automatically advancing over the static parts ('/' in the date format)? I already validate the input seperately and am happy with that, what I need is an easy way to tell the end user what format the date should be in. If it can enforce a valid date then great (although I still need to validate that certain dates are before or after others) but that's not a requirment for me — Adam
– Adam, Commented Jan 18, 2012 at 6:09

Whisk · Accepted Answer · 2020-09-21 13:13:37Z

7

This is supported by https://github.com/digitalBush/jquery.maskedinput (now archived - used to be at http://digitalbush.com/projects/masked-input-plugin/) - you just have to specify the full placeholder (see the date demo on that site):

$('#date').mask('99/99/9999',{placeholder:"mm/dd/yyyy"});

edited Sep 21, 2020 at 13:13

answered Jul 11, 2017 at 23:43

Whisk

3,4472 gold badges32 silver badges30 bronze badges

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

2 Comments

Player1 Over a year ago

Why mask it as 99/99/9999 when no month that reaches 99? Same as day.

dcp Over a year ago

@Whisk - Clicking your link gives "Error establishing a database connection"

Kevin Lee Garner · Accepted Answer · 2013-07-10 13:56:49Z

3

I had a similar requirement recently, and the only thing I could find that didn't require me to do a lot of work on tweaking the plugin was to use this modified date masking plugin. It seems to be doing the job so far.

If you want to test it out, head to this page.

The basic implementation we've used with this modified date masker is as follows:

$('#yourInputBoxHere').mask("99/99/9999", {placeholder: 'MM/DD/YYYY' });

I hope this helps.

Update: A word of warning: this plugin seems to be incompatible with later versions of jQuery. I think it's safe for jQuery 1.4 and lower.

edited Jul 10, 2013 at 13:56

answered Jul 9, 2013 at 19:24

Kevin Lee Garner

89710 silver badges12 bronze badges

5 Comments

Adam Over a year ago

Looks like just what I was looking for. Thanks (Caveat: I have tried it at the pages above but have not had time to implement it myself yet)

Kevin Lee Garner Over a year ago

A word of warning, though, this plugin seems to be incompatible with later versions of jQuery. I think it's safe for jQuery 1.4 and lower.

James Oravec Over a year ago

Can you update the links? The current ones are dead.

Kevin Lee Garner Over a year ago

Thanks @VenomFangs. I took a look and was able to successfully access the linked pages as of 7/28/2016.

Anis Over a year ago

Or, $('#yourInputBoxHere').inputmask({"mask": "99/99/9999", "placeholder": 'MM/DD/YYYY'});

bool.dev · Accepted Answer · 2012-07-18 12:53:58Z

1

You can set the value of the input as a default value like this:

$('#someId').mask("99/99/9999").val("dd/mm/aaaa");

edited Jul 18, 2012 at 12:53

bool.dev

17.5k5 gold badges71 silver badges93 bronze badges

answered Jul 18, 2012 at 12:51

Martin

111 bronze badge

Comments

Raviraj · Accepted Answer · 2022-11-16 06:54:45Z

1

I had similar requirement and so i was used like below option and it is help me to format with date. You need to load input mask jQuery file as well.

$("#yourInputBoxidHere").inputmask("datetime",{ inputFormat:"dd/mm/yyyy", placeholder: "DD/MM/YYYY"});

This is working for me well. so it will help you as well.

answered Nov 16, 2022 at 6:54

Raviraj

114 bronze badges

1 Comment

Adam Over a year ago

You are using .inputmask() not .mask() - is this a different plugin? Can you edit and add a link to the plugin you are using?

ShankarSangoli · Accepted Answer · 2012-01-17 15:02:32Z

0

You can specify your own mask to this plugin using the $.mask.definitions and then use it in your code.

answered Jan 17, 2012 at 15:02

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

1 Comment

Adam Over a year ago

I know I can specify my own mask. It's not the mask that is the problem it's the placeholder (I already have a mask which works). What I want is something like $('#foo').mask('99/99/9999', {placeholder: 'dd/mm/yyyy'}). But that uses the whole placeholder string for every character, which is not what I want.

thecreation · Accepted Answer · 2025-02-20 06:18:02Z

Sample HTML & Jquery code.

$(document).ready(function () {
            const dateInput = $("#date-input");

            // Function to format the date as YYYY/MM/DD
            function formatDate(value) {
                const numbers = value.replace(/\D/g, ""); // Remove non-numeric characters
                const year = numbers.substring(0, 4);
                const month = numbers.substring(4, 6);
                const day = numbers.substring(6, 8);

                let formattedDate = year;
                if (month) formattedDate += "/" + month;
                if (day) formattedDate += "/" + day;

                return formattedDate;
            }

            // Handle input event to enforce masking
            dateInput.on("input", function () {
                let value = $(this).val();
                const formattedValue = formatDate(value);
                $(this).val(formattedValue);
            });

            // Allow backspace to remove characters properly
            dateInput.on("keydown", function (e) {
                if (e.key === "Backspace") {
                    let value = $(this).val();
                    const newValue = value.slice(0, -1); // Remove the last character
                    $(this).val(formatDate(newValue));
                    e.preventDefault(); // Prevent default backspace behavior
                }
            });

            // Prevent entering invalid characters
            dateInput.on("keypress", function (e) {
                const char = String.fromCharCode(e.which);
                if (!/[0-9]/.test(char)) {
                    e.preventDefault(); // Allow only numbers
                }
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
            <label for="date-input">Enter Date (YYYY/MM/DD):</label>
            <input type="text" id="date-input" maxlength="10" placeholder="YYYY/MM/DD">
        </div>

I hope this aligns with your requirements!

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Specify date format in mask when using an input mask?

6 Answers 6

2 Comments

5 Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

5 Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related