使用jQuery创建特定的日期范围datepicker

我试图使用jQuery日期选择器来创建开始日期日历和结束日期日历。我正在使用此处显示的“日期范围”示例：http://jqueryui.com/demos/datepicker/#date-range 使用jQuery创建特定的日期范围datepicker

开始日期不能在今天的日期之前，结束日期可能会超过所选开始日期的30天。

例如，如果我在第一个日期选择器中选择了5月17日的开始日期，那么第二个日期选择器中的结束日期只能在5月18日至6月18日之间选择。

这里是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" />  
    <title>Untitled Document</title> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
    $(function() { 
     var dates = $("#from, #to").datepicker({ 
      defaultDate: "+1w", 
      changeMonth: true, 
      numberOfMonths: 2, 
      onSelect: function(selectedDate) { 
       var option = this.id == "from" ? "minDate" : "maxDate", 
        instance = $(this).data("datepicker"), 
        date = $.datepicker.parseDate(
         instance.settings.dateFormat || 
         $.datepicker._defaults.dateFormat, 
         selectedDate, instance.settings); 
       dates.not(this).datepicker("option", option, date); 
      } 
     }); 
    }); 
    </script> 
    </head> 

<body> 
<div class="date"> 

<label for="from">From</label> 
<input type="text" id="from" name="from"/> 
<label for="to">to</label> 
<input type="text" id="to" name="to"/> 

</div><!-- End demo --> 

</html>

任何帮助，将不胜感激。谢谢！

来源

2011-05-07 bigmike7801

你去那里：http://jsfiddle.net/c0mm0n/SJhmF/3/

$(function() { 
    $("#from, #to").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 3, 
     onSelect: function(selectedDate) { 
      if(this.id == 'from'){ 
       var dateMin = $('#from').datepicker("getDate"); 
       var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1); // Min Date = Selected + 1d 
       var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 31); // Max Date = Selected + 31d 
       $('#to').datepicker("option","minDate",rMin); 
       $('#to').datepicker("option","maxDate",rMax);      
      } 

     } 
    }); 
});

来源

2011-05-07 19:07:51 c0mm0n

非常完美！我确实在选项中添加了“minDate：new Date（）”，尽管过去没有可选项。谢谢！ – bigmike7801 2011-05-08 03:26:15

thx，帮助很大！ – 2013-10-16 11:08:04

这应做到：

http://jsfiddle.net/abze4/

$(function() { 
    var fromDate = $("#from").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 2, 
     minDate: new Date(), 
     onSelect: function(selectedDate) { 
      var instance = $(this).data("datepicker"); 
      var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 
      date.setDate(date.getDate()+30); 
      toDate.datepicker("option", "minDate", date); 
     } 
    }); 

    var toDate = $("#to").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 2 
    }); 
});

基本上这台从日期的minDate到今天。然后，当您选择fromDate时，它会将toDate的minDate设置为所选日期+30。

来源

2011-05-07 19:05:42

这有点儿做了什么，我想......它从开始日期灰色的30天，你可以选择以后任何相反。谢谢你的努力。 – bigmike7801 2011-05-08 03:25:28

使用jQuery创建特定的日期范围datepicker

回答

相关问题