Question

I have an input that holds a date value like so

03/15/2012

I am trying to select only portions of the the value instead of the whole thing. For instance if I click the spot before 2 in 2012 the year 2012 will be selected not the whole date (same for is true for months and day).

This is the code I am working with now

html:

<input class = "date-container" />

javascript/jquery:

$('.date-container').on('select', function (e)
    e.preventDefault()
    this.onselectstart = function () { return false; }; 
})

$('.date-container').on('focus', function ()
{
    if (document.selection) {
        this.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -this.value.length);
        CaretPos = Sel.text.length;
    }

    // Firefox support

    else if (this.selectionStart || this.selectionStart == '0')
        switch (this.selectionStart) {
        case 0:
        case 1:
           this.selectionStart = 0;
           this.selectionEnd = 1;
           break;
     }

}

I have tried a couple things so far. The code above is attempting to prevent the normal select action then based on where the focus is, select a portion of the string(I only have the switch statement options for the month portion, but if it worked I would do the same for day and year). This may be the wrong way to go about it.

Things to note:

By select I mean highlight.

I do not want to use plugins.

Answer 1

This code will select the portion of the date that is clicked on:

$(".date-container").click(function() {
    var val = $(this).val();
    var sel = this.selectionStart;
    var firstSep = val.indexOf("/"), secondSep;
    if (firstSep != -1) {
        secondSep = val.indexOf("/", firstSep + 1);
        if (secondSep != -1) {
            if (sel < firstSep) {
                this.setSelectionRange(0, firstSep);
            } else if (sel < secondSep) {
                this.setSelectionRange(firstSep + 1, secondSep);
            } else {
                this.setSelectionRange(secondSep + 1, val.length);
            }
        }
    }
});​

You can see it work here: http://jsfiddle.net/jfriend00/QV4VT/