jQuery の on() イベントを datepicker で使用しようとしています。フローは、ユーザーがドロップダウン リストから値を選択することです。開始日の maxDate を開始日の 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