jqueryui Datepicker，日期範圍限制到今年

我已經花了最後幾個小時修補和尋找答案，但沒有運氣，但我相信這將是相當簡單的一些人在這裏。jqueryui Datepicker，日期範圍限制到今年

我期待在日期範圍模式中使用jqueryui的Datepicker，但是我想限制只能選擇今年的日期。我還想將日期格式從mm/dd/yy更改爲dd/mm/yy。

我將發佈到原始代碼，因爲在發佈我的任何失敗工作時我沒有看到任何價值。

希望有人能幫助我，謝謝。

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>jQuery UI Datepicker - Select a Date Range</title> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script> 
$(function() { 
var dateFormat = "mm/dd/yy", 
from = $("#from") 
.datepicker({ 
defaultDate: "+1w", 
changeMonth: true, 
numberOfMonths: 3 
}) 
.on("change", function() { 
to.datepicker("option", "minDate", getDate(this)); 
}), 
to = $("#to").datepicker({ 
defaultDate: "+1w", 
changeMonth: true, 
numberOfMonths: 3 
}) 
.on("change", function() { 
from.datepicker("option", "maxDate", getDate(this)); 
}); 

function getDate(element) { 
var date; 
try { 
date = $.datepicker.parseDate(dateFormat, element.value); 
} catch(error) { 
date = null; 
} 

return date; 
} 
}); 
</script> 
</head> 
<body>

來源

2017-04-23 teddytash

根據您的需要適應以下代碼：

$(function() { 
    var year = (new Date).getFullYear(); 
    $("#from").datepicker({ 
     minDate: new Date(year, 0, 1), 
     maxDate: new Date(year, 11, 31) 
    }); 
});

和

var from = $('#from').datepicker({ dateFormat: 'dd-mm-yy' }).val();

原帖：here和here

爲了您的具體的例子，這可以應用於像這（未經測試，我沒有完整的代碼/ css）：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<title>jQuery UI Datepicker - Select a Date Range</title> 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

<script> 
    $(function() { 
     var year = (new Date).getFullYear(); 

     from = $("#from").datepicker({ 
      minDate: new Date(year, 0, 1), 
      maxDate: new Date(year, 11, 31), 
      defaultDate: "+1w", 
      changeMonth: true, 
      numberOfMonths: 3 
     }) 
     .on("change", function() { 
      $("#to").datepicker("option", "minDate", new Date($("#from").datepicker().val())); // You set the min date of `to` to be the selected date here 
     }), 

     to = $("#to").datepicker({ 
      maxDate: new Date(year, 11, 31), // minDate has already been set 
      defaultDate: "+1w", 
      changeMonth: true, 
      numberOfMonths: 3 
     }); 

     function getDate(element) { 
      var date; 
      try { 
       date = $(element).datepicker({ dateFormat: 'dd-mm-yy' }).val(); 
      } catch(error) { 
       date = null; 
      } 
      return date; 
     } 
    }); 
</script> 
</head> 

<body> 

<!-- dummy datepickers --> 
<div id="from"></div> 
<div id="to"></div> 

<!-- It is a good practice to import scripts at the end of your page, helps to render quicker the DOM --> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

</body> 
</html>

希望它幫助;）

來源

2017-04-23 13:05:14 Antoine

謝謝安託萬，但如果這是否走在原來的代碼，做我需要刪除任何現有的信息。對於除了我之外可能提出的一個問題，對每個人都是顯而易見的，我們抱歉！ – teddytash

@teddytash好的，我會更新我的答案。不過，我真的建議你花點時間來測試/理解/定製我的代碼片段，而不是簡單地複製/粘貼它） – Antoine

非常感謝你的幫助，打算從中學習，不要求別的問題。 – teddytash

jqueryui Datepicker，日期範圍限制到今年

回答

相關問題