jQuery UI 日期选择器范围

Posted 2023-05-07

【中文标题】jQuery UI 日期选择器范围

【英文标题】：jQuery UI Datepicker Range

【发布时间】：2011-04-19 03:37:55

【问题描述】：

几天前我问了一个pretty similar question，但这个很不同，我不想偏离另一个有用的话题。我基本上想设置两个文本输入字段并将它们都与 jQuery UI 的 Datepicker 连接起来，让它们充​​当一个范围......我希望第二个输入字段的开始日期取决于您在第一个输入中选择的内容场地。例如，如果我为第一个字段选择 10-25-2010，那么您可以在第二个字段中选择的最早日期应该是 10-26-2010。非常感谢有关此主题的任何帮助或指导！

【问题讨论】：

这里有一个类似的问题：***.com/questions/330737/…

【参考方案1】：

$(function() 

    $('#txtStartDate, #txtEndDate').datepicker(
        showOn: "both",
        beforeShow: customRange,
        dateFormat: "dd M yy",
    );

);

function customRange(input) 

    if (input.id == 'txtEndDate') 
        var minDate = new Date($('#txtStartDate').val());
        minDate.setDate(minDate.getDate() + 1)

        return 
            minDate: minDate

        ;
    

​

crazy demo

【讨论】：

像魅力一样工作。谢谢一百万！

Reigel，您的代码运行良好，但我应该更改哪一行以便它适用于像 dd/mm/yyyy 这样的西班牙日期格式？谢谢

【参考方案2】：

jQuery UI 日期选择器文档本身提供了一个很好的示例，说明如何链接两个日期选择器以确保有效的日期范围。

在此处查看示例：http://jqueryui.com/datepicker/#date-range

不需要额外的插件，但如果你想创建一个简单的插件，它会获取开始和结束日期字段的 id 并将必要的位插入他们在文档中提供的代码块中，这将非常简单.

【参考方案3】：

$('#firstinputfield').datepicker(

    //your other configurations.     

     onSelect: function()
     var start = $('#firstinputfield').val();
     var days = parseInt('1');
     var date = new Date(start);
     var d = date.getDate();
     var m = date.getMonth();
     var y = date.getFullYear();
     var edate= new Date(y, m, d+days);
     $('#secondinputfield').datepicker(

        //Your other configurations.

        minDate:edate

        );
        
     );

【参考方案4】：

onSelect: function(dateText, inst) 
  try 
    var date = $.datepicker.parseDate("dd/mm/yy", dateText);
      if (date) 
        date.setDate(date.getDate() + 1);
        $("#secondDatePicker").datepicker("setDate", date);
      
    
    catch(e)