jQuery UI로 Jeditable Datepicker

Question

jQuery UI Datepicker의 인스턴스를 차례로 호출 할 페이지의 요소를 편집하려면 클릭이 필요합니다.

현재 JEditable을 사용하여 잘 작동하는 장소 편집을 제공하고 있습니다. 그러나 나는 재미로 시작하는 캘린더로 표시하고 싶은 날짜 제어 입력이 있습니다. 나는 위의를 얻을 수 없다, 그러나

$.editable.addInputType("datepicker", { 
     element: function(settings, original) { 
      var input = $("<input type=\"text\" name=\"value\" />"); 
      $(this).append(input); 
      return(input); 
     }, 
     plugin: function(settings, original) { 
      var form = this; 
      $("input", this).filter(":text").datepicker({ 
       onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); } 
      }); 
     } 
    }); 

:

나는 칼레 Kabo (페이지 불행히도 조금 으깬이다)이이 작업을 수행하는 방법을 자세히 설명함으로써이 blog에 코멘트를 발견했습니다 - 오류는 없지만 효과는 없습니다. 나는 그것을 jQuery 문서 준비 함수 내에 배치하고 그것의 외부에도 놓으려고 시도했다.

내 UI Datepicker 클래스가 날짜 선택 도구이고 내 Jeditable 클래스가 ajaxedit인데, 위의 비 활동은 코드에서 어떻게 든 참조 할 필요가 있기 때문에 가능하지만 어떻게해야할지 모르겠다. 또한 Jeditable 컨트롤은 베어링이있는 경우 많은 요소 ID 중 하나입니다.

그 이상의 아이디어를 알고 계시나요?

Answer 1

나는 동일한 문제가있었습니다. http://www.appelsiini.net/projects/jeditable/custom.html의 소스 코드를 검색하면 해결책이되었습니다.

"jquery.jeditable.datepicker.js"가 있습니다. 이 코드를 내 코드에 추가하여 "datepicker"라는 새 함수를 추가했습니다 (또한 소스에 있음).

스크립트가 어떻게 작동하는지 모르겠어요하지만 내 경우에는 기능이 추가로 필요 :

id : 'elementid',

name : 'edit'

는 데이터베이스에 데이터를 저장 할 수 있습니다.

HTH :)

dabbeljuh

Answer 2

이 나는 ​​소스 코드를 살펴 위에서 언급했다,하지만 약간의 버그가있는 것 같았다. 나는 jQuery UI datepicker가 아니라 datepicker의 이전 버전 용으로 디자인되었을 수도 있다고 생각한다. 코드를 수정하고 변경 사항을 적용하여 Firefox 3, Safari 4, Opera 9.5 및 IE6 +에서 작동하는 것으로 보입니다. 다른 브라우저에서 더 많은 테스트가 필요할 수도 있습니다.

저는 여기에 사용되는 코드입니다 (라는 이름의 파일에서 개최가 jquery.jeditable.datepicker.js)

$.editable.addInputType('datepicker', { 
    element : function(settings, original) { 
     var input = $('<input>'); 
     if (settings.width != 'none') { input.width(settings.width); } 
     if (settings.height != 'none') { input.height(settings.height); } 
     input.attr('autocomplete','off'); 
     $(this).append(input); 
     return(input); 
    }, 
    plugin : function(settings, original) { 
     /* Workaround for missing parentNode in IE */ 
     var form = this; 
     settings.onblur = 'ignore'; 
     $(this).find('input').datepicker().bind('click', function() { 
      $(this).datepicker('show'); 
      return false; 
     }).bind('dateSelected', function(e, selectedDate, $td) { 
      $(form).submit(); 
     }); 
    } 
}); 

예 구현 코드 :

$(".datepicker-initiative").editable('inc/ajax/saveInitiative.php', { 
    type: 'datepicker', 
    tooltip: 'Double-click to edit...', 
    event: 'dblclick', 
    submit: 'OK', 
    cancel: 'Cancel', 
    width: '100px' 
}); 

Answer 3

가 여기 내 솔루션입니다. 사용자 지정 날짜 형식을 사용하고 datepicker를 닫으면 입력 폼을 다시 설정하고 cssdecoration을 적용합니다 (내 jeditable 개선). jQuery UI 작업 1.5.2

Answer 4

여기 내 해결책은 있지만 완전한 제다 이블 입력 유형은 아닙니다.

$.editable.addInputType('date', { 
    element : function(settings, original) { 
     var input = $('<input type="text" readonly="readonly" name="value" size="10 />'); 
     $(this).append(input); 
     return(input); 
    }, 
    plugin : function(settings, original) { 
     var form = this; 
     settings.onblur = 'cancel'; 
     $(this).find('input').datepicker({ 
      dateFormat: 'yy-mm-dd', 
      onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); }, 
      onClose: function(dateText) { $(this).hide(); $(form).trigger("submit");} 
     });    
    }, 
    submit : function(settings, original) { }, 
    reset : function(settings, original) { } 
}); 

Answer 5

jeditable-datepicker 플러그인은 정확히 당신이 필요 할 것 같다.

Jeditable에서 jQuery UI Datepicker를 사용할 수 있습니다. demo은 다음과 같습니다.