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，日期范围限制到今年

回答

相关问题