3

すべてのフォームで次のjQueryスクリプトを定義しています。

$( "input:text.datepicker" ).datepicker({ 
    yearRange: "1900:+0",
    changeMonth: true,
    changeYear: true
});

基本的に、これは、テキストタイプでクラス「datepicker」を持つ任意の入力要素で日付ピッカーを呼び出します。

これは、以下で説明する1つの状況を除いて、すべてのページで正常に機能します。

ajaxでフォームをロードする必要があります。これは、jQueryUIダイアログに表示されます。このダイアログでは、java-scriptコードを再度含めた場合にのみ、日付ピッカーを表示できます。明らかに、コードを2回含めたくありません。新しくロードされたテキストボックスに日付ピッカーを表示させる方法はありますか？

ありがとうございました

4

2 に答える 2

11

1つのオプションは、廃止された方法でメソッドとイベントを使用onしてDatepickerを初期化することです。 liveclick

$('body').on('click', 'input.datepicker', function(event) {
    $(this).datepicker({
        showOn: 'focus',
        yearRange: '1900:+0',
        changeMonth: true,
        changeYear: true
    }).focus();
});

このコードは$(document).readyセクションに配置する必要があります。

初期化後showOn: 'focus'のオプションとトリガーfocusイベントに注意してください。

デモ：http： //jsfiddle.net/Mq93s/

于 2012-05-06T09:53:27.753 に答える
2

ここでの問題は、datepickerコードが実行されたときに、フォーム要素がまだ存在していないため、それをdatepickerに変換できないことです。この問題は、次のいずれかで回避できます。

  1. document.ready日付ピッカーコードを別の関数に移動します。この関数は、イベントのすべてのページから手動で呼び出します。このように宣言されるのは1回だけであり、ajaxページでも呼び出すことができますready。イベントではなく、ajax呼び出しが完了したときにのみ呼び出すことができます。
  2. フォームに何を読み込んでいるかがわかっているので、指定された入力だけを日付ピッカーに変換できます。これはそれほどクリーンな解決策ではありません。日付ピッカーで何かを変更したい場合は、少なくとも2つの場所で変更する必要があるからです。

どちらのアプローチも有効です。どちらのバージョンがプロジェクトにより適しているかを知っているので、選択はあなた次第です:)

于 2012-05-06T10:12:40.920 に答える