javascript - 如何在 jquery UI datepicker 中创建日期范围，而无需在主 datepicker 函数内再次调用 datepicker？

Question

在选择范围时，我遇到了 jquery UI datepicker 的一个奇怪问题。在提出问题之前，我正在研究许多其他人编写的代码。他们以优化的顺序包含了 jquery 工具和 UI，因此所有功能都可以正常工作。除了 jquery UI 之外的所有内容。我提到的原因是，我无法更新版本或切换库的顺序，因为它破坏了所有其他代码:((但我确实确保 jquery、js、jquery UI 不会在任何地方包含两次)

也就是说，问题是这样的 - 我想要两个日期，其中“结束”日期应该晚于“开始”日期。使用来自 jquery 站点的以下代码应该很容易:

$(function() {
    $( "#from" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate ); //BREAKS!
        }
    });
    $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate ); //BREAKS!
        }
    });
});

问题是当我在注释为“BREAKS!”的行中选择日期时，代码会中断。它根本没有检测到主日期选择器函数中的第二个日期选择器并给我错误 - SCRIPT438:对象不支持属性或方法“datepicker”

所以我读了以下内容post并决定按照以下方式做事。这可行，但显然我现在没有范围功能。

$(document).ready(function(){

$('#from').datepicker({
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            showButtonPanel: true,
    onSelect: function(dateText, inst) { 
    $('[name=wmFrom]').val(dateText); //need this part for the search filters
    }

});
 $('#to').datepicker({
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            showButtonPanel: true,
    onSelect: function(dateText, inst){ 
    $('[name=wmTo]').val(dateText); //need this part for the search filters
    }       
});
});

好吧，我还在学习js和jquery。任何人都可以帮助我实现一系列功能，而无需在日期选择器内调用/初始化日期选择器。我知道这个问题可能意味着库的版本或兼容性可能存在一些问题。但就像我说的，我真的无法摆脱它们或对此做出太大改变。任何想法/帮助将非常感激..

<小时/>

更多信息-

这令人沮丧，因为在我之前工作的人已经这样做了，而我所做的任何更改都会破坏不同的功能。这是一个内部应用程序，因此无法提供链接:(。

这就是我所说的 - 首先有一个 php header ，它包含在我正在处理的问题文件的顶部。该 header 包含 jquery 库的链接。包含 header.php 后，有指向 queryLoader.js、jquery.easing.1.3.js 的链接。然后有一堆代码，其中包含脚本和正文 html(这是与日期选择器关联的 html 输入所在的位置)。然后它们链接/full/jquery.tools.min.js 、 jquery.effects.core.js、jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.datepicker、query.ui.tooltip。 js，jquery-ui.css。此后，还有更多脚本使用 $.tools.validator.fn 和 serializeObject() 等函数。

如果我假设它加载 jquery lib 两次并将/full/jquery.tools.min.js 更改为/tiny/jquery.tools.min.js 或/all/jquery.tools.min.js 我得到以下内容错误:对象不支持此属性或方法与 SerializeObject() 等函数相关。当页面自行加载时我得到这个。

如果我在所有 UI 类链接之后添加/jquery.tools.min.js，我会得到:对象不支持属性或方法“datepicker”在输入的日期选择器初始化时。当页面自行加载时我得到这个。

我应该做什么:(

Answer 1

4 年多后我尽力帮助您:)

$(document).ready(function(){
  //datapickerer creation... $('#to').datepicker({...

  $("#to").on( "change", function() { 
            $("#from").datepicker("option", "maxDate", getDate( this ));
  });
  $("#from").on( "change", function() { 
            $("#to").datepicker("option", "minDate", getDate( this ));
  });
});