0

Twitter ブートストラップ デートピッカー ( http://www.eyecon.ro/bootstrap-datepicker/ )を使用しています。

私がやろうとしているのは、ユーザーが日付を変更したときに、入力値 (例: 15-02-2012 ) を使用してページをロードすることです。

入力ボックスはこのコードを使用しています...

    <div class="input-append date"  data-date="12-02-2012" data-date-format="dd- mm-yyyy">
    <input class="span9" size="16" id="dp3" type="text" value="12-02-2012" onchange="myFunction()">
    <span class="add-on"><i class="icon-th"></i></span>

そして、ページをリロードする JavaScript はこれです...

<script>
function myFunction()
{
datevalue = document.getElementById("dp3").value
window.open(datevalue,"_self");
}
</script>

問題は、日付ピッカーで日付が変更された場合 (入力 ID = dp3)、何も起こらず、ページがリロードされないことです。しかし、myFunction() を別のテキスト ボックスにアタッチしようとすると、機能し、datepicker (dp3) で値を取得できます。

問題は、JavaScript が日付ピッカー (id=dp3) の値の変更を認識していないことです。なぜこれが事実なのか誰にも分かりますか？

4

1 に答える 1

1

idリンクの例 n°3 からコードを取得したようですが、間違ったタグに切り替えました。

                       Here  --.
                               V
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
    <input class="span2" size="16" type="text" value="12-02-2012" readonly="">
    <span class="add-on"><i class="icon-calendar"></i></span>
</div>

タグに id を残しinputて元の JS コードを保持すると、.datepicker()メソッドは間違った要素 (入力) で呼び出されます。これは、親 div で呼び出されることを意味します。

次に、jQuery で、タグ自体ではchangeDateなく、日付ピッカーのイベントをバインドする必要があります。onChangeinput

次のようなことを試すことができます（jQueryを使用）：

$('#dp3').datepicker().on('changeDate', function() {
    //Retrieve the date located on the data of your datepicker
    var datevalue = $('#dp3').data("date");

    //You can take the value from the input as well if you want
    //The input tag doesn't really need an ID to be retrieved (see comments)
    //var datevalue = $('#dp3 input').val();

    window.open(datevalue,"_self");
});

編集：これはマイナーな変更を加えた実用的なフィドルです。

于 2013-06-16T22:00:06.420 に答える