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

Posted 2023-05-07

【中文标题】如何使用 jQuery Datepicker 动态应用 setDate 和（minDate 和 maxDate）日期范围？

【英文标题】：How to apply both- setDate and (minDate and maxDate )Date Range dynamically using jQuery Datepicker?

【发布时间】：2021-04-11 00:43:24

【问题描述】：

我有一个下拉菜单，我可以从中选择年份和另一个具有日期选择器的日历字段。

我想要做的是，如果我选择 2021 年，默认日期应该是 12/31/2021，它也应该是 maxDate。

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

我经历了很多 *** 问题和 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 属性不起作用。

【问题讨论】：

new Date(12 + "/" + 31 + "/" + $("#year").val()); 为什么不用new Date($("#year").val(),11,31) 这样您就不会遇到任何本地化问题？

没有本地化问题

【参考方案1】：

在api你有流动

设置日期：使用setDate

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

设置最大日期使用maxDate

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

请参阅下面的工作 sn-p 以获得更多理解

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" />