使用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

回答

相關問題