使用 jQuery DatePicker &一个 jQuery Mask，在单个输入上具有 4 年日期

Question

我们有一个文本框，我们希望它既能触发 jQuery UI 日期选择器，又能在文本框中徒手输入文本。我们目前正在通过 jQuery UI Mask 和 jQuery UI Mask 来实现这一目标。同一文本框上的 DatePicker。但是，我必须“破解”掩码才能使其正常工作 - 因为，一旦您自由文本输入： 04/29/19

然后，在您完成输入“83”以完成四位数日期之前，日期选择器会触发一些事件它将日期选择器的当前日期移动到您输入的日期，但是，它也会删除到目前为止的整个日期。所以目标是输入日期：04/29/1983，但日期选择器删除了我到目前为止的内容。起初我们认为面具有问题，但现在我只需要弄清楚如何杀死日期选择器事件以免错误触发。任何帮助将不胜感激！

抱歉，代码示例：

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

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

Answer 1

我遇到了同样的问题，但这不是 JQuery datepicker 问题，问题是 MASK 插件，当您写入年份的 2 或 4 位数字时，jquery 会触发事件，但是当事件被触发时，MASK 事件也会被调用，并且会发生冲突。
解决方案是包含掩码的 JQuery 日期选择器。

我使用触发按钮解决了我的问题，因为如果用户想要写日期，他只需输入日期即可，但是，如果他们想要选择，只需单击按钮触发器即可。

尝试一下。
http://jqueryui.com/demos/datepicker/#icon-trigger

Answer 2

上面的答案绝对适用于这个问题。但是，在没有触发按钮的情况下，我想出了一个解决方案，如下所示：

$('#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();
}

那么我做了什么：

• 声明日期选择器，但格式为：“mm/dd/yyyy”，我错误地认为是它所显示的格式。然而，在 jQuery DateFormat 定义站点 上，这实际上使得日期在选择时成为格式为：mm/dd/yyyyyyyy（年份重复两次）。显然，DateFormat 中的 'yy' == 4 位数年份。
  这个最初的错误让我找到了答案。
• 屏蔽您已将日期选择器绑定到的相关日期字段。
• 通过较长的日期输入，触发删除我的蒙版的事件将停止。我所要做的就是放入我在日期选择器的 onSelect & 上创建的自定义方法。 onClose 函数，&现在一切正常。它本质上剥夺了不必要的双年度和双年度。日期选择器的选择不正确。掩蔽和具有 4 位数年份格式的日期选择器现在可以一起工作。