javascript - Dynamic Smart date mask while inserting date- Stack Overflow

admin管理员组

文章数量:1353470

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 07/07/2011 will alway fill to 07/07/2011. In the final final version I am trying to get the year to default to the current decade but have a drop down to each 10 year++ --.

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 07/07/2011 will alway fill to 07/07/2011. In the final final version I am trying to get the year to default to the current decade but have a drop down to each 10 year++ --.

• javascript
• jquery
• prototypejs

Share Improve this question Follow edited Jul 29, 2012 at 20:54 RetroCoder asked Jul 19, 2012 at 17:53 RetroCoderRetroCoder 2,6851111 gold badges5555 silver badges8383 bronze badges 1

• 2 From an end user perspective, I find these types of things extremely effing annoying. This is only my opinion, of course. I would check the user experience stack exchange for advice on the best way to do these. They may have a full solution there already made. – Isaac Fife Commented Jul 23, 2012 at 19:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

I believe that the functionality that you want is provided by the jQuery Masked Input plugin

Demo: http://jsfiddle/SO_AMK/SEXAj/

Please note that it also only allows numeric characters.

Answer goes here... jQuery masked input plugin.

本文标签： javascriptDynamic Smart date mask while inserting date Stack Overflow