在 jquery datepicker 重置为当前日期之前捕获手动输入的日期，同时使用 Max Date 进行限制

Posted 2023-03-27

【中文标题】在 jquery datepicker 重置为当前日期之前捕获手动输入的日期，同时使用 Max Date 进行限制

【英文标题】：Capturing manually entered date before jquery datapicker resets to current date while restricting with Maxdate

【发布时间】：2021-12-27 18:37:48

【问题描述】：

我有一个数据选择器类 (datepicker_nfd)，它附加到使用 maxdate 将日期小部件限制为仅当前日期的输入字段。我有一个自定义的 knockoutjs 绑定来显示自定义错误消息并重置用户离开该字段的日期（onchange）。我的问题是，如果用户手动输入将来的日期并按 Enter，则小部件会将日期设置为触发 onchange 之前的当前日期，因此我无法检查是否显示该消息。我已经尝试过 datepicker 的 onseect 方法，也尝试过捕获“enter”按键无济于事。有关如何在日期选择器小部件重置为当前日期之前捕获手动输入的日期的任何建议？

javascript（为了简洁起见，仅适用代码）

$(document).ready(function () 
     $(".datepicker_nfd").datepicker(maxDate: 0); 
);

KnockoutJS 绑定（为了简洁起见，仅适用代码）

    ko.bindingHandlers.preventFutureDate = 
        init: function (element, valueAccessor, allBindingsAccessor, vm) 
            $(element).change(function () 
                var selectedDate = Date.parse(ko.unwrap(valueAccessor()));
                var curDate = Date.now();
                if (selectedDate > curDate) 
                    var value = valueAccessor();
                    var eMsg = ($(element).data("emessage") || "Date") + " can not be set to a future date. Defaulting to current day.";
                    value(DateTime.fromMillis(Date.now()).toFormat('MM/dd/yyyy'));
                    showToast("Invalid Date", eMsg.trim(), "exclamation-triangle", "yellow");
                
            );
        
    ;

html（仅适用于简洁的代码）

         <div class="form-group col-md-2">
             <label for="someDate-datepicker_nfd">Some Date Label</label>
             <input type="text" class="form-control datepicker_nfd" id="someDate-datepicker_nfd" data-bind="value: model.SomeDate, preventFutureDate: model.SomeDate" data-emessage="Some Date Error Message" />
         </div>

【问题讨论】：

您可以隐藏输入，然后在按钮上显示 DatePicker，而不是在输入中输入。

这可能有效，但我也需要手动输入。感谢 Twisty 的建议！

【参考方案1】：

所以我找到的解决方案是你确实必须使用按键，它必须在日期选择器初始化之前......所以在我的情况下，我在一个文件中初始化了绑定并且另一个中的日期选择器。这导致 keydown 无法触发（假设 datepicker 阻止默认设置。所以 HTML 保持不变，js 现在如下（顺序很重要）。

Javascript/KnockoutJS（为了简洁起见，仅适用代码）

    let keyedDate;
    ko.bindingHandlers.preventFutureDate = 
        init: function (element, valueAccessor, allBindingsAccessor, vm) 
            $(element).keydown(function (e) 
                if (e.keyCode === 13)                 
                    checkForFutureDate(element, valueAccessor, keyedDate);
                
            );
            $(element).change(function () 
                checkForFutureDate(element, valueAccessor, ko.unwrap(valueAccessor()));
            );
        
    ;
    $($(".datepicker_nfd")).keydown(function (e) 
        if (e.keyCode === 13) 
            keyedDate = $(this).val();
        
    );
    // NOTE: This needs to be placed after the Knockout Binding Handler for preventFutureDate to capture the keydown event.
    // The companion selector for $(".datepicker").datepicker(); in in site.js
    $(".datepicker_nfd").datepicker(maxDate: 0);

    function checkForFutureDate(element, valueAccessor, dateToVerify) 
        var selectedDate = Date.parse(dateToVerify);
        var curDate = Date.now();

        if (selectedDate > curDate) 
            var value = valueAccessor();
            var eMsg = ($(element).data("emessage") || "Date") + " can not be set to a future date. Defaulting to current day.";
            value(DateTime.fromMillis(Date.now()).toFormat('MM/dd/yyyy'));
            showToast("Invalid Date", eMsg.trim(), "exclamation-triangle", "yellow");
        
    ;

HTML（仅适用于简洁的代码）

        <div class="form-group col-md-2">
             <label for="someDate-datepicker_nfd">Some Date Label</label>
             <input type="text" class="form-control datepicker_nfd" id="someDate-datepicker_nfd" data-bind="value: model.SomeDate, preventFutureDate: model.SomeDate" data-emessage="Some Date Error Message" />
         </div>

有点古怪，但可以完成工作。注意到使用 keyedDate 来捕获日期选择器在绑定之外更改它之前的日期。需要绑定才能访问 HTML 绑定中的其他值。