jQuery UI DatePicker와 함께 제시 가능

StackOverflow https://stackoverflow.com/questions/642136

문제

페이지에서 요소를 편집하려는 클릭이 필요하므로 jQuery UI DatePicker의 인스턴스가 호출됩니다.

현재 저는 제시 가능성을 사용하여 제자리에 편집을 제공합니다. 그러나, 나는 캘린더로 나타나고 싶은 날짜 제어 입력이 있습니다.

나는 이것에서 의견을 찾았다 블로그 작성자 : Calle Kabo (페이지는 불행히도 약간 으깬다).

$.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"); }
            });
        }
    });

그러나 위의 작업을 수행 할 수는 없습니다. 오류는 없지만 영향을 미치지 않습니다. 나는 그것을 jQuery 문서 준비 기능과 외부에 배치하려고 시도했습니다.

내 UI DatePicker 클래스는 Date-Picker이고 Jeditable Class는 Ajaxedit입니다. 위의 무 활동은 코드에서 어떻게 든 참조가 필요했기 때문이라고 확신하지만, 방법을 모릅니다. 또한, Jeditable Control은 베어링이있는 경우 많은 요소 ID 중 하나입니다.

더 알고있는 사람들의 아이디어가 있습니까?

도움이 되었습니까?

해결책

나는 같은 문제가 있었다. Sourcecode 내부에서 검색 http://www.appelsiini.net/projects/jeditable/custom.html 솔루션에 나를 데려 왔습니다.

"jquery.jeditable.datepicker.js"가 있습니다. 이것을 내 코드에 넣었습니다. 새로운 함수 "datepicker"(소스에도)가 추가되었습니다.

스크립트가 어떻게 작동하는지 모르겠지만 제 경우에는 기능이 추가로 필요합니다.

ID : 'ElementId',

이름 : '편집'

데이터를 데이터베이스에 저장합니다.

HTH :)

Dabbeljuh

다른 팁

위에서 언급 한 Sourcecode를 살펴 보았지만 약간 버그가있는 것 같습니다. 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'
});

그만큼 jeditable-datepicker 플러그인은 필요한 것을 정확하게 수행하는 것 같습니다.

Jeditable에서 jQuery UI DatePicker를 가능하게합니다. 여기에 있습니다 데모.

여기 내 해결책이 있습니다. 나는 사용자 정의 날짜 형식을 사용하고 datepicker 닫기에서 입력 양식을 재설정하고 cssdecoration (나의 제시 가능한 개선)을 적용합니다. jQuery UI와 협력 1.5.2

$.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({
        firstDay: 1,
        dateFormat: 'dd/mm/yy',
        closeText: 'X',
        onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); },
        onClose: function(dateText) {
            original.reset.apply(form, [settings, original]);
            $(original).addClass( settings.cssdecoration );
            },
    });
}});

다음은 내 솔루션이 있지만 완전한 제시 가능한 입력 유형은 아닙니다.

$.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) { }
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top