jQuery UI DatePickerでJeditable

Question

jQuery UI Datepickerのインスタンスを呼び出すページの要素を編集するにはクリックが必要です。

現在、私はJEditableを使ってインプレース編集を提供していますが、これはうまくいきます。ただし、カレンダーとして表示したい日付制御入力があります。これは楽しい時間が始まる場所です。

これを行う方法の詳細をカーレKABO（ページが、残念ながら少しつぶしている）によって、このblogでコメントIを見つけた：

$.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つです。

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

Answer 1

私は同じ問題を抱えていました。ソースコードの中でhttp://www.appelsiini.net/projects/jeditable/custom.htmlを検索することで、私はその解決方法を知ることができました。

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

スクリプトがどのように動作するか私は知らないが、私の場合には機能がさらに必要である：

id : 'elementid',

name : 'edit'

は、データベースにデータを格納します。私はソースコードを見てみました:)

dabbeljuh

Answer 2

HTHは、前述したが、少しバギーのようでした。私はそれがdatepickerの古いバージョンではなく、jQuery UIの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

ここに私の解決策がありますが、完全な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) { } 
}); 

Answer 5

jeditable-datepickerプラグインは、必要な機能を備えているようです。

jeditableでjQuery UI Datepickerを有効にします。ここにはdemoがあります。