jQuery UI DatepickerでJeditable

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

質問

ページの要素を編集するためにクリックする必要があります。これにより、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ドキュメントのready関数内とそれ以外にも配置しようとしました-喜びはありません。

UI Datepickerクラスはdate-pickerで、Jeditableクラスはajaxeditです。上記の非動作はコードで何らかの形で参照する必要があるためだと確信していますが、方法はわかりません。また、Jeditableコントロールは、ベアリングがある場合、多くの要素IDの1つです。

知っている人からのアイデアはありますか？

役に立ちましたか？

解決

同じ問題がありました。 http://www.appelsiini.net/projects/jeditable/customのソースコード内を検索する.html で解決に至りました。

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

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

  

id： 'elementid'、

     

name： 'edit'

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

hth：）

dabbeljuh

他のヒント

上記のソースコードを見てみましたが、少しバグが多いようです。 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 );
            },
    });
}});

これは私の解決策ですが、完全なjeditable入力タイプではありません。

$.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