2014-06-12 3 views
1

나는 캘린더 버튼을 클릭하면 날짜 선택 도구가 열리고 입력 텍스트 상자에 날짜가 표시됩니다. 내가 원하는 일은 두 번째 텍스트 상자에 30 일 이후의 날짜로 자동 완성됩니다. 내가 jquery와 함께 작동하도록하는 것이 문제가되고있다.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 아무것도 클릭하기 전에 모습입니다 :

이 내가 클릭 할 때 발생하는 것입니다 inent의 오른쪽에있는 #entrySrc 캘린더 버튼 유타 텍스트 상자

그때 내가 그 달력 상자에서 원하는 날짜를 클릭 할 수 있습니다. 입력 텍스트 상자가 왼쪽에 채워집니다.

캘린더 상자에있는 두 번째 클릭에 대해 채우기 기능을 실행하려면 어떻게해야합니까?

+0

나는 심지어와 mouseUp 및 mousedown을하는만큼 멀리 갔다 ....하지만 :( –

+0

는 어떻게이 수 –

+0

귀하의 클릭 핸들러가 성취하려는 것을 해결하려고합니다 ... JSFiddle에서 귀하의 HTML 코드를 제공해 주시겠습니까? –

답변

2

매우 간단한 해결책이있을 수 있습니다. #entrySrc 이 (가)으로 변경되면 populate() 메소드가 실행됩니다.

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

이들 대안 중 하나를 당신이 populate하지 populate() 전달하는

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

참고. 여기에 매우 빈약 한 문서를 바탕으로

+0

결과를받지 못하면 #entrySrc는 실제로 캘린더 버튼 이미지입니다. 또한 시도 : '$ ("# ENTR 입력 텍스트 상자가 변경 될 때마다 채워지지만 아무 것도 입력하지 않아도됩니다. –

+0

캐싱 된 코드를 사용하고 있지 않은지 확인하고 싶습니다. (예 : "YDATEFROM"). 테스트. 너 힘들어? Windows에서는 Ctrl + F5를, Mac에서는 Cmd + Shift + R을 누릅니다. 낡은 코드에 대한 테스트는 내가 항상 직장에서 조심해야 할 것입니다. –

+0

아, 문제가 있습니다. 그렇게'populate() '를 호출 할 수 없다면 괄호를 생략해야합니다. 나는 오타를 만들지 않았다. –

1

: (이 컨트롤은 sooooooo 오래

분명히 어디 전역 함수의 부하에 훅하는 것입니다 plugins.js 파일을 엽니 다 http://calendarxp.net/tutorials/flat/tutorials/PluginsSDK.htm 난 당신이 다음을 수행해야 할 거라 생각). 당신이 넣어 무엇

///////////// 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. 
} 

가 실제 사용의 무언가가 있어야한다 :

(나는 거의 비어있는 기능이 될 것이다 수집)을 fOnChange 템플릿에 코드를 넣습니다. 다음과 같은 맞춤 이벤트를 생성하는 것이 좋습니다.

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); 
관련 문제