0

財務会計 Web サイトの各ページに日付ピッカー フォームが含まれています。日付ピッカーは、ユーザーが表示するデータの日付範囲を選択できるように設計されています。

残念ながら、テキスト フィールドにフォーカスがあるときにカレンダーを表示する唯一の方法は、ユーザーがページからページへ移動するときにハード リフレッシュ (Ctrl-R) を行うことです。最適ではありません。

フォームは次のとおりです。

<li data-data-theme='b' >
<label for="from">From</label>  
<input type="text" id="from" name="from"/>
</li>

<li data-data-theme='d'>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
</li>

そして、ここにjqueryがあります：

    $(function() {

        console.log("hello world 2");

        $( "#from" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 3,
            stepMonths: 3,
            showOtherMonths: true,
            showOptions: {direction: 'up'},
            showButtonPanel: true,
            yearRange: "2011:2019", 
            showAnim: "fold",
            dateFormat: "yy-mm-dd",
            onSelect: function( selectedDate ) {
                $( "#to" ).datepicker();
            }
        });
        $( "#to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 3,
            stepMonths: 3,
            showOtherMonths: true,
            showOptions: {direction: 'up'},
            showButtonPanel: true,
            yearRange: "2011:2019", 
            showAnim: "fold",
            dateFormat: "yy-mm-dd",
            onSelect: function( selectedDate ) {
                $( "#from" ).datepicker();
            }
        });
    });


}

$(document).ready(function(){

    console.log("hello world");


    $(function() {

        console.log("hello world 2");

        $( "#from" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 3,
            stepMonths: 3,
            showOtherMonths: true,
            showOptions: {direction: 'up'},
            showButtonPanel: true,
            yearRange: "2011:2019", 
            showAnim: "fold",
            dateFormat: "yy-mm-dd",
            showOn: 'button', 
        buttonImage: 'images/datepicker_icon.png', 
        buttonImageOnly: true,

            onSelect: function( selectedDate ) {
                $( "#to" ).datepicker();
            }
        });
        $( "#to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 3,
            stepMonths: 3,
            showOtherMonths: true,
            showOptions: {direction: 'up'},
            showButtonPanel: true,
            yearRange: "2011:2019", 
            showAnim: "fold",
            dateFormat: "yy-mm-dd",
            onSelect: function( selectedDate ) {
                $( "#from" ).datepicker();
            }
        });
    });



});

クラスへの参照を含めるようにフォームを変更しようとしました:例:

<li data-data-theme='b' >
<label for="from">From</label>  
<input class='datepicker' type="text" id="from" name="from"/>
</li>

<li data-data-theme='d'>
<label for="to">to</label>
<input class='datepicker' type="text" id="to" name="to"/>
</li>

jquery関数でそれを参照すると、次のようになります。

   $(function() {

      console.log("hello world 2");

    $( ".datepicker" ).datepicker({

           ...

           onSelect: function( selectedDate ) {
        $( ".datepicker" ).datepicker();
                }
    });
       });

しかし、すべて無駄です。

ここで質問があります: ユーザーが Web サイトの新しいページに移動したときに、datepicker カレンダーを表示するにはどうすればよいですか?

4

1 に答える 1

0

ユーザーがこれらのページにアクセスしたときに、デフォルトで日付ピッカーを開きますか? はいの場合、datepicker の display inline プロパティを構成する必要があります。例を参照してください。

$(function() {
      $('#datepicker').datepicker({altField: '#date1'});
});
于 2012-06-22T05:38:28.687 に答える