首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >基于另一个元素的jQuery日期选择器依赖关系

基于另一个元素的jQuery日期选择器依赖关系
EN

Stack Overflow用户
提问于 2013-02-08 01:33:30
回答 1查看 801关注 0票数 0

我正在尝试将jQuery的on()事件与datepicker一起使用。流程是用户从下拉列表中选择一个值,一个关闭事件被附加到开始日期,该事件将结束日期的maxDate设置为开始日期的selectedDate之后的30天:

代码语言:javascript
复制
 $("#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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-02-09 00:12:39

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

如果想要将事件绑定到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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14757335

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档