9

ページ上の要素をクリックして編集する必要があります。これにより、jQuery UI Datepicker のインスタンスが呼び出されます。

現在、私は JEditable を使用してインプレース編集を提供していますが、これは正常に機能しています。ただし、カレンダーとして表示したい日付制御入力があり、そこから楽しみが始まります。

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 クラスは ajaxedit です。上記の不作為は、コード内でそれらを参照する必要があるためだと確信していますが、その方法はわかりません。また、関係がある場合、Jeditable コントロールは多くの要素 ID の 1 つです。

詳しい人からのアイデアはありますか？

4

5 に答える 5

14

上記のソースコードを見てみましたが、少しバグがあるようでした。jQuery UIの日付ピッカーではなく、古いバージョンの日付ピッカー用に設計された可能性があると思います。コードにいくつかの変更を加えましたが、変更により、少なくとも 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'
});
于 2009-09-10T18:18:12.163 に答える
5

これが私の解決策です。私はカスタムの日付形式を使用し、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 );
            },
    });
}});
于 2009-10-22T13:48:01.007 に答える
4

私も同じ問題を抱えていました。http://www.appelsiini.net/projects/jeditable/custom.htmlのソースコード内を検索すると、解決策にたどり着きました。

「jquery.jeditable.datepicker.js」があります。これを私のコードに入れ、新しい関数「datepicker」を追加しました（ソースにもあります）。

あなたのスクリプトがどのように機能するかはわかりませんが、私の場合、関数にはさらに次のものが必要です。

id : 'エレメント ID',

名前：「編集」

データベースにデータを保存します。

h番目:)

ダベルジュ

于 2009-03-26T10:11:00.380 に答える
1

これが私の解決策ですが、完全にジェダイト可能な入力タイプではありません。

$.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) { }
});
于 2010-01-13T05:18:18.620 に答える