Question

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

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

在用户标签出来之后，我真的不在乎这个值是否会被破坏为某种特定格式。一个好的输入掩码插件也可以用于我的目的，但是，this popular one似乎期望每个字段都有一个固定的基数，这将无法工作，因为我希望用户能够输入3或03例如，3月份。

Answer 1

由于这个问题是活跃的，已经有一段时间了，但如果有人对使用更简单的jQueryUI日期选择器解决问题感兴趣，可以通过调整其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;
};

Answer 2

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

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

不幸的是，如果按下Enter键我无法找到相同的方法。

Answer 3

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

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

Answer 4

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

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

另外请注意，如果你不重写这两个，他们就不会按预期行事。例如。您将无法键入自定义格式列表中的字符（除了存储在日期选择器本身中的第一种格式）。

Answer 5

基于@mnsc的评论，改进@cage响尾蛇的解决方案：

// 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

jQuery Datepicker，支持多种格式

5 个答案: