使用JavaScript call（）函數時發生日期選擇器問題

Question

我試圖覆蓋我的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調用函數沒有第二次執行。 自從我在網絡上搜索以來，我找不到任何具體的東西。 我也希望插件第二次接受參數。

Answer 1

您的代碼調用了原始的datepicker函數，但始終好像是從頭開始初始化datepicker一樣。 您正在攔截"option"調用並將其轉換為初始化調用。 顯然，它不允許多次初始化。

相反，您需要檢測是否進行了初始化或“方法”調用，如果是方法調用，則進行方法調用。 另外，除非您將"option" changeYear或“ changeMonth "option"設置為不需要的值，否則無需攔截"option" 。

遵循以下原則（可能需要進一步調整）：

(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 call（）函數時發生日期選擇器問題

問題描述

1 個解決方案

解決方案1
1 已采納 2017-09-06 07:24:38

使用JavaScript call（）函數時發生日期選擇器問題

問題描述

1 個解決方案

解決方案1 1 已采納 2017-09-06 07:24:38

解決方案1
1 已采納 2017-09-06 07:24:38