我试图覆盖我的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调用函数没有第二次执行。自从我在网上搜索以来，我找不到任何具体的东西。我也希望插件第二次接受参数。
最佳答案
您的代码调用了原始的datepicker函数，但始终好像是从头开始初始化datepicker一样。您正在拦截"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>关于javascript - 使用JavaScript call()函数时发生日期选择器问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46068960/