使用 JavaScript call() 函数时的日期选择器问题答案

【问题标题】：datepicker issue while using JavaScript call() function使用 JavaScript call() 函数时的日期选择器问题
【发布时间】：2017-09-06 07:11:14
【问题描述】：

我正在尝试覆盖我的 datepicker 插件并实现我自己的自定义 datepicker。我将我的代码放在一个全局 js 文件中，以便在页面加载后立即覆盖。

(function($) {
    var originalVal = $.fn.datepicker;
    $.fn.datepicker = function(val1, val2, val3) {
        console.log(val1); // option
        console.log(val2); // maxDate
        console.log(val3); // 09/06/2017
        // var dp = originalVal.clone();
        // console.log(dp);
        var _options = {
            changeYear: true,
            changeMonth: true
        }

        if (val1 == "option") {
            _options[val2] = val3
            console.log(_options[val2]);
        }
        else {
            _options = $.extend(_options, val1)
        }

        console.log(_options); //Object { changeYear: true, changeMonth: true, maxDate: Date 2017-09-06T06:52:32.449Z }

        return originalVal.call(this, _options);
    };
})(jQuery);

当页面加载和 changeYear 和 changeMonth 以及最大日期限制为 09/06/2017 时，这可以完美运行。

这是我的页面代码：

</head>
<body>
    <input type="text"  id="pickDate2" >
    <input type="text"  id="pickDate3" >
    <script>
    $("#pickDate2").datepicker();
    $("#pickDate3").datepicker('option','maxDate',new Date());
    $("#pickDate2").change(function(){
        var val = $(this).val();
        $("#pickDate3").datepicker('option','minDate',Date.parse(val));
    })
    </script>
</body>
</html>

现在，页面加载后，执行以下代码时，未设置最小日期

$("#pickDate2").change(function(){
    var val = $(this).val();
    $("#pickDate3").datepicker('option','minDate',09/03/2017);
})

当我检查控制台是否有我的插件覆盖代码时，参数似乎没问题。

console.log(_options);//Object { changeYear: true, changeMonth: true, minDate: Date 2017-09-03T18:15:00.000Z }

据我所知，JavaScript 调用函数没有第二次执行。自从我在网上搜索后，我找不到任何具体的东西。我也希望插件第二次接受参数。

【问题讨论】：

在上面，你永远不会在#pickDate3上初始化日期选择器。
是的，在我的更改功能之上
没有。 $("#pickDate3").datepicker('option','maxDate',new Date()); 是方法调用，而不是初始化。如果您对从未初始化过日期选择器的元素执行此操作，则会忽略它。

标签： javascript datepicker

【解决方案1】：

您的代码调用了原始的日期选择器函数，但总是好像它是从头开始初始化一个日期选择器。您正在拦截 "option" 调用并将其转换为 init 调用。显然，它不允许多次初始化。

相反，您需要检测是否正在进行初始化或“方法”调用，如果是方法调用，则执行方法调用。另外，您无需拦截 "option"，除非它将 changeYear 或 changeMonth 设置为您不想要的东西。

这些方面的东西（可能需要进一步调整）：

(function($) {
    var originalVal = $.fn.datepicker;
    $.fn.datepicker = function(val1, val2, val3) {
        if (val1 === "option") {
            if (val2 === "changeYear" || val2 === "changeMonth") {
                return this; // Ignore it
            }
        }
        if (typeof val1 === "string") {
            // Method call, pass through
            return originalVal.apply(this, arguments); 
        }
        // Init call, ensure our options are set and pass it on
        var _options = $.extend({}, val1, {
            changeYear: true,
            changeMonth: true
        });
        return originalVal.call(this, _options);
    };
})(jQuery);

以上对我有用。这是您的示例没有上面的更改，只是使用普通的 jQuery 和 jQuery UI （我添加了缺少的$("#pickDate3").datepicker();）：

$("#pickDate2").datepicker();
$("#pickDate3").datepicker();
$("#pickDate3").datepicker('option', 'maxDate', new Date());
$("#pickDate2").change(function() {
  var val = $(this).val();
  $("#pickDate3").datepicker('option', 'minDate', Date.parse(val));
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<input type="text" id="pickDate2">
<input type="text" id="pickDate3">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

这里是与上面的变化；请注意，您的 changeYear 和 changeMonth 选项已按预期添加，当我们更改第一个输入时，maxDate 更改也会受到尊重：

(function($) {
    var originalVal = $.fn.datepicker;
    $.fn.datepicker = function(val1, val2, val3) {
        if (val1 === "option") {
            if (val2 === "changeYear" || val2 === "changeMonth") {
                return this; // Ignore it
            }
        }
        if (typeof val1 === "string") {
            // Method call, pass through
            return originalVal.apply(this, arguments); 
        }
        // Init call, ensure our options are set and pass it on
        var _options = $.extend({}, val1, {
            changeYear: true,
            changeMonth: true
        });
        return originalVal.call(this, _options);
    };
})(jQuery);
$("#pickDate2").datepicker();
$("#pickDate3").datepicker();
$("#pickDate3").datepicker('option', 'maxDate', new Date());
$("#pickDate2").change(function() {
  var val = $(this).val();
  $("#pickDate3").datepicker('option', 'minDate', Date.parse(val));
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<input type="text" id="pickDate2">
<input type="text" id="pickDate3">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

【讨论】：

@T.J.Cowder ，方法调用的 apply 函数也没有帮助，问题和以前一样。在这种情况下不会与 call 相同吗？
@SauravDangol：不。上面的apply 传递原始参数不变。但上面的主要变化是正确处理方法调用与初始化。我很惊讶没有用，这是什么库？
，我的日期选择器版本是 1.8.24。另外，我在这里直言不讳，如果我错了，请纠正我，我传递的参数如下： if (typeof val1 === "string") { var option = {} option[val2] = val3 return originalVal.apply(this, [option]); }
@SauravDangol：什么日期选择器的版本？ jQuery 用户界面？其他的？重新输入代码：不，您没有传递它们，您正在将带有 (string, string, value) 的调用转换为带有 (object) 的调用，这被视为一个 init 调用。这就是为什么我在上面进行了更改，以便在进行“方法”调用时，我们继续传递(string, string, value)。
初始化似乎是您建议的问题。它现在按预期工作。感谢您的时间和精力。