在使用 Maxdate 進行限制的同時，在 jquery 數據選擇器重置為當前日期之前捕獲手動輸入的日期

Question

我有一個數據選擇器類 (datepicker_nfd)，它附加到使用 maxdate 將日期小部件限制為僅當前日期的輸入字段。 我有一個自定義的 Knockoutjs 綁定來顯示自定義錯誤消息並在用戶離開該字段時重置日期（onchange）。 我的問題是，如果用戶手動輸入未來的日期並按 Enter，小部件會在觸發 onchange 之前將日期設置為當前日期，因此我無法檢查以顯示消息。 我嘗試了 datepicker 的 onseet 方法，也嘗試捕獲“輸入”按鍵無濟於事。 關於如何在日期選擇器小部件重置為當前日期之前捕獲手動輸入的日期的任何建議？

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>

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

有點古怪，但可以完成工作。 注意到 let 和 keyedDate 在日期選擇器在綁定之外更改它之前捕獲日期。 這需要綁定來訪問 HTML 綁定中的其他值。