0

我正在尝试将 jQuery 的 on() 事件与日期选择器一起使用。流程是用户从下拉列表中选择一个值,关闭事件附加到 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(),但它出错了。每次我需要更改选项时,是否需要销毁日期选择器并重新创建它?谢谢!

jsfiddle:jsfiddle.net

4

1 回答 1

0

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

如果您想将事件绑定到日期选择器本身,请使用 onSelect,如果您想在其他任何事情上使用标准 $.on

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

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

选择:http : //api.jqueryui.com/datepicker/#option-onSelect

祝一切顺利

-莱德杰

于 2013-02-08T16:12:39.437 回答