支持多种格式的jQuery Datepicker答案

【问题标题】：jQuery Datepicker that supports multiple formats支持多种格式的jQuery Datepicker
【发布时间】：2010-12-03 16:15:36
【问题描述】：

我想知道是否有人可以建议一个插件或解决方案，让我可以同时使用具有多种输入日期格式的 jQuery datepicker 插件。这将允许用户以任何指定格式输入日期。即：

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

我真的不在乎在用户跳出标签后值是否会被破坏为特定格式之一。一个好的输入屏蔽插件也可能适用于我的目的，但是，this popular one 似乎希望每个字段都有一个固定的基数，这不起作用，因为我希望用户能够输入 3 或 03 的月份例如，三月。

【问题讨论】：

为什么 jQueryUI Datepicker dateFormat 不适合你？ jqueryui.com/demos/datepicker/#date-formats
我希望用户能够以多种格式输入日期，我并不关心是哪一种，也不想让他们提前指定。 dateFormat 只接受一种格式。

标签： jquery jquery-plugins jquery-ui-datepicker

【解决方案1】：

这个问题已经有一段时间了，但是如果有人有兴趣使用更简单的 jQueryUI datepicker 解决问题，可以通过调整它的 parseDate 方法来完成：

$.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;
};

【讨论】：

testParse(format, value, settings);这行是否意味着先测试原始dateFormat，然后测试所有inputFormats？如果是这样，inputFormats 应该被称为additionalFormats？
你让我开心！谢谢！
能否也请添加用法。我应该在 jquery ui 文件中添加你的代码并修改它吗？谢谢
抱歉这么久才回复你的问题，Alex，但如果有人仍在考虑这个决定，我不会修改你的库源文件，除非万不得已。当一个方法被暴露时，就像这个一样，只需在你自己的代码中覆盖它。
根据评论写了一个更新的答案，见下文。

【解决方案2】：

您可以尝试解释多种输入格式并替换blur 事件中的字符：

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

很遗憾，如果按下 Enter 键后我找不到相同的方法。

【讨论】：

【解决方案3】：

这个“Unobtrusive Date-Picker Widget V5”似乎接受多种格式。我对您提供的所有三种格式进行了快速测试，似乎每个人都被接受了。

演示：http://www.frequency-decoder.com/demo/date-picker-v5/

【讨论】：

【解决方案4】：

Cage rattler 回答说您可以覆盖 jquery datepicker 函数 parseDate 以支持多种格式。（由于声誉，我无法发表评论，但无论如何都需要添加此信息）

我发现如果您将 datepicker 中的格式变量设置为格式列表，您还需要覆盖 formatDate 和 _possibleChars 函数。日期选择器不需要列表（在我的情况下为 JSON），您必须解决此问题。

还要考虑，如果您不覆盖这两个，它们将不会按预期运行。例如。您将无法键入自定义格式列表中的字符（存储在日期选择器本身中的第一种格式除外）。

【讨论】：

【解决方案5】：

改进了@cage rattler 的解决方案，特别是基于@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;
};

此外，如果您想在离开字段时重新格式化输入，请参阅我在此主题上的回答：https://stackoverflow.com/a/53499934/5426777

【讨论】：