帶有glDatePicker的DatePicker。具有兩個輸入的日期範圍

我正在使用glDatePicker生成日期範圍選擇系統。帶有glDatePicker的DatePicker。具有兩個輸入的日期範圍

您有一個From date輸入文本和一個To輸入文本。

有沒有辦法將glDatePicker（From input）的一個實例的選定日期作爲selectableDateRange從值傳遞給另一個（要輸入）？

我試過這個，但它不工作。

 <input type="text" id="from" /> 
</p> 
<p> To: 
    <input type="text" id="to" /> 
</p> 
<script type="text/javascript"> 


var today = new Date(); 
var datelimit = new Date(today); 
datelimit.setDate(today.getDate() + 31); 

var to = $('#to').glDatePicker(true); 


$('#from').glDatePicker({ 
    showAlways: false, 
    allowMonthSelect: true, 
    allowYearSelect: true, 
    prevArrow: '', 
    nextArrow: '', 
    selectedDate: today, 
    selectableDateRange: [{ 
     from: today, 
     to: datelimit 
    }, ], 
    onClick: function (target, cell, date, data) { 
     target.val(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()); 

     //Cambio la fecha del #to 
     var toFrom = new Date(date); 
     var toLimit = new Date(); 
     toLimit.setDate(toFrom.getDate() + 31); 
     $.extend(to.options, 
      { 
       selectableDateRange: [{ 
       from: toFrom, 
       to: toLimit 
      }, ], 
      }); 
      to.render(); 

     if (data != null) { 
      alert(data.message + '\n' + date); 
     } 
    } 
}).glDatePicker(true);

日Thnx提前！

來源

2013-01-05 SauronZ

最後我解決了。

我希望它可以幫助別人。

<!DOCTYPE html> 
<html> 
<head> 
<link href="styles/glDatePicker.default.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<p> From: 
<input type="text" id="from" /> 
</p> 
<p> To: 
<input type="text" id="to" /> 
</p> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="glDatePicker.min.js"></script> 
<script type="text/javascript"> 


var today = new Date(); 
var datelimit = new Date(today); 
datelimit.setDate(today.getDate() + 31); 



$('#from').glDatePicker({ 
    showAlways: false, 
    allowMonthSelect: true, 
    allowYearSelect: true, 
    prevArrow: '', 
    nextArrow: '', 
    selectedDate: today, 
    selectableDateRange: [{ 
     from: today, 
     to: datelimit 
    }, ], 
    onClick: function (target, cell, date, data) { 
     target.val(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()); 

     if (data != null) { 
      alert(data.message + '\n' + date); 
     } 
    } 
}).glDatePicker(true); 


var to = $('#to').glDatePicker(
{ 
    showAlways: false, 
    onClick: function (target, cell, date, data) { 
     target.val(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()); 

     if (data != null) { 
      alert(data.message + '\n' + date); 
     } 
    } 
}).glDatePicker(true); 

$('#to').click(function() { 
    var fechaFrom = new Date($("#from").val()); 
    var toLimit = new Date(); 
    toLimit.setDate(fechaFrom.getDate() + 31); 
    to.options.selectableDateRange = [{ 
     from: fechaFrom, 
     to: toLimit 
    }, ], 
    to.options.showAlways = false; 
    to.render(); 
}); 


</script> 
</body> 
</html>

來源

2013-01-06 16:33:05 SauronZ

我嘗試這樣做，它不會阻止您的是，在該日期之前發生的第二場使用日期第一場。但是，當您點擊它時，它不會自動將第二個字段提前到該日期。你會怎麼做？ – Maelish

我使用SauronZ答案的代碼，但發現更改用於創建日期範圍的天數導致錯誤。

後的閱讀時間，我發現這裏對堆棧線程，導致我正確的答案（https://stackoverflow.com/a/19691491/2288421）

我增加了以下功能$（「＃以」）內點擊功能：

function addDays(date, days) { 
    var result = new Date(date); 
    result.setDate(date.getDate() + days); 
    return result; 
}

然後我打電話生成toLimit當該功能：

var tempDate = new Date($('#from').val()); 
toLimit = addDays(tempDate, 91);

正如你所看到的，我設置我的範圍至91天，但您可以輸入任何ñ你希望的。

這裏是萬一有人改變了代碼的完整塊需要看到它：

$('#to').click(function() { 
    var fechaFrom = new Date($("#from").val()); 
    var toLimit = new Date(); 

    /**** ADDED FUNCTION TO ALLOW ADDING OF ANY NUMBER OF DAYS ****/ 
    function addDays(date, days) { 
     var result = new Date(date); 
     result.setDate(date.getDate() + days); 
     return result; 
    } 

    var tempDate = new Date($('#from').val()); 

    toLimit = addDays(tempDate, 91); 
    to.options.selectableDateRange = [{ 
     from: fechaFrom, 
     to: toLimit 
    }, ], 
    to.options.showAlways = false; 
    to.render(); 
});

來源

2014-05-13 20:09:28 enga

帶有glDatePicker的DatePicker。具有兩個輸入的日期範圍

回答

相關問題