如何使用 jQuery Datepicker 动态应用 setDate 和（minDate 和 maxDate）日期范围？

Question

我有一个下拉列表，其中 select 年份和另一个具有日期选择器的日历字段。

我想做的是如果我 select 2021 年，默认日期应该是 12/31/2021 并且它也应该是 maxDate。

之后，如果我更改 2022 年，默认日期应该是 12/31/2022，就像以前一样，它也应该是 maxDate。

我已经经历了很多 Whosebug 问题和 api ，但没有解决问题。我错过了什么或做错了什么？

function updateCalendarDate() {
     var calMaxDate = new Date(12 + "/" + 31 + "/" + $("#year").val());
     $('#calDate').val(beforeShowDay1(calMaxDate));
     $("#calDate").datepicker({
         "startDate": beforeShowDay(new Date()),
         "endDate": beforeShowDay(calMaxDate),
         "minDate": beforeShowDay(new Date()),
         "maxDate": beforeShowDay(calMaxDate)
     });
     $("#calDate").datepicker("destroy");
     $("#calDate").datepicker("setDate", beforeShowDay(calMaxDate));
     $( "#calDate" ).datepicker("refresh");
};

到目前为止我尝试过的是：
1.

 $("#calDate").datepicker({
    "setDate": beforeShowDay(calMaxDate),
     "startDate": beforeShowDay(new Date()),
     "endDate": beforeShowDay(calMaxDate),
     "minDate": beforeShowDay(new Date()),
     "maxDate": beforeShowDay(calMaxDate)
 });

先设置默认日期，然后销毁并重新设置maxDate

$("#calDate").datepicker("setDate", beforeShowDay(calMaxDate));

$('#calDate').datepicker('destroy'); $('#calDate').datepicker('option', 'maxDate', new Date(calMaxDate));

如果我使用 setDate，那么 setDate 属性将不起作用。

Answer 1

在api你有流动的

设置日期：使用setDate

$("selector").datepicker("setDate", yourCreatedDate);

设置最大日期使用 maxDate

$("selector").datepicker( "option", "maxDate", yourCreatedDate );

请参阅下面的工作片段以获得更多理解

jQuery(document).ready(function ($) {
  $("#calDate").datepicker({
  });
  
  $('#year').on("change", function(e) {
    if(!this.value) return;
    
    let setDate = new Date (this.value,11,31);
    
    console.log(setDate);
    //this prevent maxdate if going ahead  for date
    $("#calDate").datepicker( "option", "maxDate", null );
    $("#calDate").datepicker("setDate", setDate);
    $("#calDate").datepicker( "option", "maxDate", setDate );
    
  });
  
});

@import url("//code.jquery.com/ui/1.10.3/themes/start/jquery-ui.min.css");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>


<input id='year' type='number' />
<input id="calDate" />

如何使用 jQuery Datepicker 动态应用 setDate 和（minDate 和 maxDate）日期范围？

How to apply both- setDate and (minDate and maxDate )Date Range dynamically using jQuery Datepicker?

javascript

jquery

datepicker

calendar

jquery-ui-datepicker