根据下拉列表中的选定年份自动设置datepicker的mindate和maxdate

时间:2017-06-15 07:26:28

标签: javascript jquery datepicker uidatepicker

我可以根据下拉列表中选定的年份设置datepicker的mindate和maxdate吗?

下拉

<div class="col-sm-2" id="y_type" style="text-align:left;">
<select class="" style="width: 100%; display:inline-block;">
    @{ 
         DateTime datetime = DateTime.Now;
         for (int i = 0; i <= 2; i++)
      {
           <option>@(datetime.AddYears(+i).ToString("yyyy"))</option>
       }
     }
</select>
 </div>

datepicker代码

$(document).ready(function () {
        var dateCount = 1;
        $('.holidayBody tr').each(function (e) {
            var x = $(this).find('.holiday_date');
            x.attr('id', 'daterange' + dateCount);
            x.attr('readonly', 'true');
            $('#daterange' + dateCount).datepicker({ dateFormat: "dd/mm/yyyy" });
            dateCount++;
        });
    });

如果选择2017,则文本字段中的日期选择器将仅减少2017年,将禁用更长的年份

2 个答案:

答案 0 :(得分:1)

Try this code

you can set year using yearRange

http://api.jqueryui.com/datepicker/#option-yearRange

var selectedYear;
$('#dropdown').on('change',function(){
  selectedYear = $('#dropdown :selected').text();
  var start = new Date();
  start.setFullYear(selectedYear);
  $("#daterange").datepicker("destroy");
  $( "#daterange" ).datepicker({
    	changeMonth: true,
        changeYear: true,
	yearRange: start.getFullYear() + ':' + start.getFullYear()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<select id="dropdown" name="dropdown">
  <option value="select">select-year</option>
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
</select>
<input type="text" id="daterange">

答案 1 :(得分:0)

你可以尝试这个

$(function () {
    var start = new Date();
    var end = new Date();

    $('#dob').datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: start.getFullYear() + ':' + end.getFullYear()
    });
});