Question

我有一个日历按钮，单击该按钮可打开日期选择器并将日期放入输入文本框。我想要发生的是，有一个第二个文本框自动填充未来30天的日期。我遇到的麻烦就是让它与jquery一起工作。

HTML：

<tr>
<td align = "center">Entry Date From:  <input id="ENTRYDATEFROM" name="ENTRYDATEFROM" type="text" maxLength="10" size="12" value="">
<img height="20"src="calendarsrc" id="entrySrc"></td>
<td align = "center">Entry Date To:   <input id="ENTRYDATETO" name="ENTRYDATETO" type="text" maxLength="10" size="12" value="">
<img height="20"src="calendarsrc" id="entrySrc2"></td>
</tr>

JQUERY：

$(document).ready(function() {

  $("#entrySrc").click(function(){
     gAnytime.fPopCalendar(document.myform.ENTRYDATEFROM);
  });

  $("#entrySrc2").click(function(){
     gAnytime.fPopCalendar(document.myform.ENTRYDATETO);
  });

  //Tried this but had no success
  //$(document).on("change", "#entrySrc", populate);


});

function populate(){
 var q = $("#ENTRYDATEFROM");
 var dateTo    = new Date(q.val()); 
 var newDate   = new Date(dateTo.setDate(dateTo.getDate() + 30));
 var formatted = padNumber(newDate.getUTCMonth() + 1) + '-' + padNumber(newDate.getUTCDate()) + '-' + newDate.getUTCFullYear();
 $("#ENTRYDATETO").val(formatted);
}

function padNumber(number) {
  var string  = '' + number;
  string      = string.length < 2 ? '0' + string : string;
  return string;
}

在点击任何内容之前，这就是我的GUI：

当我点击位于输入文本框右侧的#entrySrc日历按钮时会发生这种情况

然后我可以点击该日历框中我希望的任何日期。这将填充左侧的输入文本框。

如何在日历框内的第二次点击上执行我的填充功能？

Answer 1

可能有一个非常简单的解决方案：只需在#entrySrc 更改时触发populate（）方法。

$(document).on("change", "#entrySrc", populate);

或其中一种替代方案：

$("#entrySrc").on("change", populate);
$("#entrySrc").change(populate);

请注意，您传递的是populate，而不是populate()。

Answer 2

基于这里非常糟糕的文档：http://calendarxp.net/tutorials/flat/tutorials/PluginsSDK.htm我猜您需要执行以下操作：

打开你的plugins.js文件，这显然是挂钩到一堆全局函数的地方（这个控件太旧了）。

将您的代码放入fOnChange模板（我收集的模板几乎是空函数）：

///////////// Calendar Onchange Handler ////////////////////////////
// It's triggered whenever the calendar gets changed to y(ear),m(onth),d(ay)
// d = 0 means the calendar is about to switch to the month of (y,m); 
// d > 0 means a specific date [y,m,d] is about to be selected.
// e is a reference to the triggering event object
// Return a true value will cancel the change action.
// NOTE: DO NOT define this handler unless you really need to use it.
////////////////////////////////////////////////////////////////////
function fOnChange(y,m,d,e) {
  .... put your code here ....
return false; // return true to cancel the change.
}

你放在那里应该有一些实际用途。我建议生成这样的自定义事件：

function fOnChange(y,m,d,e) {
    var $e = $(e.target); // (or e.originalTarget or whatever you can find with a debugger!)
    $e.trigger("calchange");
    return false; // return true to cancel the change.
}

这将要求在js文件之前包含jQuery。

在您的代码中，为所有日历监听：

$(document).on('calchange', populate);

在jquery中第二次单击时执行函数

2 个答案: