Dynamic Smart date mask while inserting date

Question

Is there a way in javascript or jQuery to detect and change dynamically while typing a date for both a key input and a copy and paste to a text box? I'm trying to create a functional text box which has two digits such as a month. Since the month can be a number from 1 - 12 I want to enforce the first digit to be a 1 or a 0. The trick that I'm trying to do however is when the text box first gains focus and a user beging to type a number, if that number is 2 - 9 I want a zero to automatically fill the first spot and then but the 9 in the second spot. Before I type anything this date input would look like so: ``` __/__/_____ ``` If I type a "1" ``` 1_/__/_____ ``` If I type "2" should get ``` 02/__/_____ ``` If I type "22" should get ``` 02/2_/_____ ``` If I type "77" should get ``` 07/07/_____ ``` I would be very interested for in an answer with code or a link to a tool that already does this or a link to a previous post? Eventually I want to put it in a masked so 7/7/2011 or 7/7/11 or…

Accepted Answer

Why not attach a listener to the blur of the textbox, rather than to the user's typing.

Think about the user experience if you were typing "1", and all of a sudden, the input started adding or removing zeroes to what you were doing, while you were doing it?

```
var dayInput = document.getElementById("day-input");
// usually, I'd just use event-listeners, but feel free to refactor
dayInput.onblur = handleDayOrMonth;

function handleDayOrMonth () {
    var el = (this === window) ? event.srcElement : this,
        number_string = el.value;

// checking that it's an actual number
    if (!isNaN(parseInt(number_string)) {
        if (number_string.length === 1) { el.value = "0" + number_string; }
    }
}
```

Handling the year would be just the same, except that you'd be adding "20" to the start of whatever it is.

Feel free to jQuery it up.

Dynamic Smart date mask while inserting date

Solution

Problem