jQuery Datepicker that supports multiple formats

Question

I'm wondering if anyone can suggest a plugin or solution that would allow me to use the jQuery datepicker plugin with multiple input date formats at the same time. This would allow the user to enter the date in any of the specified formats. I.e.:

3 31 10
3/31/2010
3-31-10

I don't really care if the value gets mangled to one of the specific formats after the user tabs out. A good input masking plugin might work for my purpose too, however, this popular one seems to expect a fixed cardinality for each of the fields, which won't work because I want the user to be able to enter 3 or 03 for the month of March, for example.

Answer 1

It's been a while since this question was active, but if anyone is interested in solving the problem using the simpler jQueryUI datepicker, it can be accomplished by tweaking its parseDate method:

$.datepicker.inputFormats = ["dd-mm-yy", "dd/mm/yy", "dd mm yy"];//list formats to be accepted here

$.datepicker.originalParseDate = $.datepicker.parseDate;

$.datepicker.parseDate = function (format, value, settings) {
    var date;

    function testParse(format, value, settings) {
        if ( ! date ) {
            try {
                date = $.datepicker.originalParseDate(format, value, settings);
            } catch (Error) {
            }
        }
    }

    testParse(format, value, settings);
    for(var n = 0, stop = $.datepicker.inputFormats ? $.datepicker.inputFormats.length : 0; n < stop; n++){
        testParse($.datepicker.inputFormats[n], value, settings);
    };
    return date;
};

Answer 2

You can attempt to interpret multiple input formats and replace the characters on the blur event:

$("#datepicker").datepicker({
    constrainInput: false
}).blur(function() {
    var txt = $(this).val();
    $(this).val(txt.replace(/-| /g, '/'));
});

Unfortunately, if I cannot find a way to do the same if the Enter key is pressed.

Answer 3

This 'Unobtrusive Date-Picker Widget V5' seems to accept multiple formats. I did a quick test of all three of the formats you supplied, and everyone seemed to be accepted.

Demo : http://www.frequency-decoder.com/demo/date-picker-v5/

Answer 4

Cage rattler answered that you can override the jquery datepicker function parseDate to support multiple formats. (I can't comment due to reputation, but need to add this information regardless)

I found that you also need to override the formatDate and _possibleChars functions if you are setting the format variable within the datepicker to be the list of formats. The datepicker doesn't expect a list (in my case JSON) and you have to work around this.

Also consider that if you don't override these two, they won't behave as expected. E.g. you will not be able to type the characters that are in your custom format list (except for the first format that is stored in the datepicker itself).

Answer 5

Improvement of the solution from @cage rattler, based notably on the remark from @mnsc:

// Accepted additional formats [here, allow for example "4/7/18" for "July 4, 2018"]
$.datepicker.additionalFormats = ["ddmmy", "ddmmyy", "d/m/y", "d/m/yy", "d/mm/y", "dd/m/y", "dd/m/yy", "dd/mm/y"];
// Backup the original parsing function
$.datepicker.originalParseDate = $.datepicker.parseDate;
// New parsing function
$.datepicker.parseDate = function (format, value, settings) {
    // Function that returns a date based on an input format
    function testParse(inputFormat) {
        try {
            // Try to get the date based on the input format
            date = $.datepicker.originalParseDate(inputFormat, value, settings);
            // If the date is right, returns it immediately
            return date;
        }
        catch (Error) {
            // _RD Bad date (this line does nothing but catching the error)
        }
    }
    // Initialise the returned date
    var date;
    // Don't bother with empty values
    if (value !== "0" && value !== "") {
        // Test the main datepicker format (which is an argument of this function)
        testParse(format);
        // If the main datepicker format didn't work, try with the additional ones
        for (var n = 0; n < $.datepicker.additionalFormats.length; n++) {
            testParse($.datepicker.additionalFormats[n]);
        }
    }
    // If the input string couldn't be parsed, returns just the "undefined"-typed variable
    return date;
};

Additionally, if you want to reformat the input when leaving the field, see my answer here on this topic: https://stackoverflow.com/a/53499934/5426777