Question

我正在尝试使用jQuery的on（）事件和datepicker。流程是用户从下拉列表中选择一个值，close事件附加到startdate，它将enddate的maxDate设置为startdate的selectedDate之后的30天：

 $("#ddlRentalTerm").on("change", OnRentalTermChange);

 $("#txtRentalStartDate").datepicker({
    dateFormat: "mm-dd-yy",
    showOn: "button",
    buttonImageOnly: true,
    buttonImage: "Images/iconCalendar0.gif",
    buttonText: "Start Date",
    minDate: -89,
    onSelect: function (selectedDate) {
        $("#txtRentalEndDate").datepicker("option", "minDate", selectedDate);
        PopulateNumberOfWeeks(false);
    }
});

$("#txtRentalEndDate").datepicker({
    dateFormat: "mm-dd-yy",
    showOn: "button",
    buttonImageOnly: true,
    buttonImage: "Images/iconCalendar0.gif",
    buttonText: "End Date",
    minDate: -89,
    onSelect: function (selectedDate) {
        $("#txtRentalStartDate").datepicker("option", "maxDate", selectedDate);
        PopulateNumberOfWeeks(false);
    }
});



 function OnRentalTermChange(event) {
  var $btnCreatePO = $("#btnCreatePO");
  var $startdate = $("#txtRentalStartDate");
  var $enddate = $("#txtRentalEndDate");
  var selectedDate = new Date();

  var selRental = $("#ddlRentalTerm").val();

  if (selRental === "1") {
    $startdate.datepicker("option", "onClose", BindShortTermDate);
    $startdate.datepicker("refresh");
    $btnCreatePO.attr('disabled', 'disabled');
  }
  else
  {
    RestoreShortTermStartDate();
    RestoreShortTermEndDate();
    $btnCreatePO.attr('disabled', false);
  }

};

function BindShortTermDate(dateText, instObj)
{
   var $startdate = $("#txtRentalStartDate");
   var $enddate = $("#txtRentalEndDate");
   var selectedDate = new Date(dateText);
   var maxDate = new Date();
   maxDate.setDate(selectedDate.getDate() + 30);
   $enddate.datepicker("setDate",maxDate);

  $enddate.datepicker("option",{
    numberOfMonths: 2,
    minDate: selectedDate,
    maxDate: maxDate, 
    changeMonth: false, 
    changeYear: false
  });
  $enddate.datepicker("refresh");
}

所以，我尝试将不同的例子拼凑在一起，但它没有产生任何结果。我可能比它需要的更难。我尝试在datepicker上做一个on（）但是它出错了。我是否需要销毁datepicker并在每次需要更改选项时重新创建它？谢谢！

jsFiddle： jsfiddle.net

Answer 1

更改要修改的选项，然后刷新日期选择器。

如果你想将事件绑定到datepicker本身，请使用onSelect，如果你想在其它任何东西上使用标准$ .on

更改选项：http://api.jqueryui.com/datepicker/#method-option

刷新：http://api.jqueryui.com/datepicker/#method-refresh

onselect：http://api.jqueryui.com/datepicker/#option-onSelect

一切顺利

-Lededje

jQuery datepicker依赖于另一个元素

1 个答案: