使用JavaScript call()函数时的datepicker问题

2019年7月28日 124次阅读

我试图覆盖我的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.您正在拦截“选项”呼叫并将其转换为初始呼叫.显然,它不允许多次初始化.

相反,您需要检测是否正在进行初始化或“方法”调用,如果是方法调用则执行方法调用.另外,你不需要拦截“选项”,除非它将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>
点赞