Use a jQuery DatePicker & a jQuery Mask with a 4 year date on a single input

Question

We have a textbox that we want to both trigger a jQuery UI datepicker, as well as have the ability to enter text freehand into the textbox. We are currently achieving this is with both jQuery UI Mask & DatePicker on the same textbox. However, I had to 'hack' the mask to get it to work - because, once you freetext enter: 04/29/19

Then, before you can finish entering the "83" to finish the four digit date, datepicker fires some event that moves the datepicker's current date to the one you are entering, but, it also deletes the entire date so far. So the goal was to enter the date: 04/29/1983, but the datepicker deleted what I had so far. At first we thought the mask was at fault, but now I just need to figure out how to kill the datepicker event from firing mistakenly. Any help would be so appreciated!

Sorry, code sample:

$('#txbxSocialHistoryDate').datepicker({
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true
 });

$('#txbxSocialHistoryDate').mask("99/99/9999", { placeholder: " " });  

Answer 1

The above answer definitely works for this question. However, without a trigger button, I came up with a solution, as follows:

$('#txbxSocialHistoryDate').datepicker({
            showButtonPanel: true,
            changeMonth: true,
            changeYear: true,
            dateFormat: 'mm/dd/yyyy',
            onSelect: function (dateText, inst) {
                UIUtilities_jQueryDatePickerOnCloseEventIfAlsoMasked(this, 'txbxSocialHistoryDate', dateText);
            },
            onClose: function (dateText, inst) {
                UIUtilities_jQueryDatePickerOnCloseEventIfAlsoMasked(this, 'txbxSocialHistoryDate', dateText);
            }
});

$('#txbxSocialHistoryDate').mask("99/99/9999", { placeholder: " " });

function UIUtilities_jQueryDatePickerOnCloseEventIfAlsoMasked(thisDatePicker, txbxOfDatePicker, dateText) {
    // when the calendar closes, determine if this was entered by hand, or by the calendar
    var textInBox = $('#' + txbxOfDatePicker).val();

    // if by the calendar, it will have 2 years attached, so we then shave the 2nd year off the end
    // there is a brief flash of the incorrect year, but short of taking off both the masking & calendar on this one textbox, this will work...
    if (textInBox.length > 10) {
        $('#' + txbxOfDatePicker).val(dateText.substring(0, dateText.length - 4));
    }

    // this fixes the tabbing issue mentioned; now when you tab out of the calendar, it will move on to the appropriate control...
    thisDatePicker.focus();
}

So what I did:

• Declare the datepicker, but make the format: 'mm/dd/yyyy', which, I mistakenly believed to be what it appears. However, on the jQuery DateFormat definition site, this actually makes the date, when selected, be formatted as: mm/dd/yyyyyyyy (year repeats twice). 'yy' == 4 digit year in DateFormat, apparently. This initial mistake led me to the answer.
• Mask the date field in question that you have already bound your datepicker to.
• With a longer date entry, the event that fires that was deleting my mask is stopped. All I had to do was put in this custom method that I created on the datepicker's onSelect & onClose functions, & now everything works. It essentially strips off the double year that is unnecessary & incorrect from the datepicker's selection. Masking & the datepicker with a 4 digit year format now work together.