0

私はインラインの日付ピッカーを次のように呼び出しています（デモ目的のための簡略化されたバージョン）：

<input id="inp_datepicker" name="startDateField">
<div id="datepicker"></div>

<input id="inp_datepicker2" name="endDateField">
<div id="datepicker2"></div>

そして、これを Javascript に追加して、選択の結果を編集可能なフィールドに入れるようにしました。

$("#datepicker").datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate');
        $('#inp_datepicker')[0].value = convertDateToString(dateObject);
    }
});

$("#datepicker2").datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate');
        $('#inp_datepicker2')[0].value = convertDateToString(dateObject);
    }
});

2 番目の日付ピッカーが 2 番目のフィールドにデータを入力しないことを除いて、すべてが正常に機能します。最初の 1 つ、問題ありません。2つ目、何もありません。

2 番目の onSelect 関数にブレークポイントを設定しましたが、そこでまったく壊れていないことがわかりました。

(入力をカレンダーにポップアップさせるだけでこれを回避でき、以前はすべて正常に機能していましたが、今回は PRD がインライン日付ピッカーを指定しているため、選択の結果をフィールドに割り当てる必要があります。 ) 繰り返しますが、最初のものは正常に動作します。

編集class="hasDatepicker"ソースにはなく、jQuery-UI datepicker が機能した後にレンダリングされたマークアップにのみ含まれるため、div から削除されました。

EDIT 2私は自分で問題を解決したと言って恥ずかしいです. 日付ピッカーとは関係のない別の無関係なスクリプトに関連していたようです。そのスクリプトを削除した後、スクリプトがエラーをスローしていなくても、すべて機能しました。ああ、レガシ コードがなければどうすればよいでしょうか。また、誰も時間を無駄にしないように、この投稿を削除するのがおそらく最善だと思います。ご迷惑おかけして申し訳ありません。

4

2 に答える 2

1

問題は class に起因しているようです.hasDatepicker。

<div id="datepicker" class="hasDatepicker"></div>
<div id="datepicker2" class="hasDatepicker"></div>

を呼び出すと.datepicker()、自動的に が追加されます.hasDatepicker。そのクラスが既に存在する場合は、datepicker が既に追加されていると見なされます。

例: http://jsbin.com/ukotit/27/edit

sからクラスを削除するdivと、動作するはずです。

$("#datepicker").removeClass('hasDatepicker').datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate');
        $('#inp_datepicker')[0].value = convertDateToString(dateObject);
    }
});

$("#datepicker2").removeClass('hasDatepicker').datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate');
        $('#inp_datepicker2')[0].value = convertDateToString(dateObject);
    }
});

デモ: http://jsbin.com/ukotit/30/edit

アップデート：

$("#datepicker, #datepicker2").datepicker({
    onSelect: function(dateText, inst) { 
      $(this).prev()[0].value = dateText;
    }
});

http://jsbin.com/ukotit/32/edit

于 2013-04-12T17:53:52.077 に答える
0

入力ではなくdivに日付ピッカーがあります。

これを次のように簡単に作り直すことができます。

データをelemnetに追加して使用します。

<input id="inp_datepicker" data-relatedelementid="datepicker" type="text" name="startDateField">
<div id="datepicker" class="hasDatepicker"></div>
<input id="inp_datepicker2" data-relatedelementid="datepicker2"  type="text" name="endDateField">
<div id="datepicker2" class="hasDatepicker"></div>

$("#inp_datepicker,#inp_datepicker2").datepicker({
    onSelect: function (dateText, inst) {
        $('#'+$(this).data('relatedelementid')).text(dateText);
    }
});
于 2013-04-12T17:57:43.860 に答える