1

日付ピッカーを使用して日付を表示するコードを試してみましたが、開始日と終了日を 1 ページに 2 回表示する必要がありますが、開始日のみが表示され、終了日は表示されません。

<html>
<head>
    <link rel='stylesheet' id='admin-css'  href='admin.css' type='text/css' media='all' />
    <link rel='stylesheet' id='colors-fresh-css'  href='colors-fresh.css' type='text/css' media='all' />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function(){
        $( "#datepicker" ).datepicker();
        $("#icon").click(function() { 
            $("#datepicker").datepicker( "show" );
        })
    });
    </script>
</head>
<body>
    <input type="text" id="datepicker" name='from' size='9' value="" />  
    <img src='images/calender.PNG' id='icon' height='25px' width='25px'/ >
</body>
</html>
4

6 に答える 6

3

入力タイプの日付を使用しない理由

<input type="date" id="datepicker" name='from' size='9' value="" />

デモ

于 2013-03-21T10:36:31.327 に答える
0

idの代わりにclassを使用することをお勧めします。IDは一意である必要があり、そうでない場合は問題が発生します。クラスを使用すると、同じクラスを持つ多くの要素を操作する機会が得られます。idの場合、1つのidに対して正しく処理され、他の問題を引き起こす可能性があることに言及しない他の人には望ましくない結果が得られます。これを試して

$(function()
            {
                     $( ".datepicker" ).datepicker();
                     $(".icon").click(function() { $(".datepicker").datepicker( "show" );})
             });

 <input type="text" class="datepicker" name='from' size='9' value="" />  <img src='images/calender.PNG' class='icon' height='25px' width='25px'/ > 

 <input type="text" class="datepicker" name='to' size='9' value="" />  <img src='images/calender.PNG' class='icon' height='25px' width='25px'/ >

また、ここでhtml5の日付と日時のタイプの例を確認してください：http ：//www.w3schools.com/html/tryit.asp？filename = tryhtml5_input_type_date

于 2013-03-21T10:43:55.650 に答える
0

<input>あなたのボディには、日付ピッカーをアタッチするための 2 番目のタグが含まれていません。

だから、このようなものを使用してください。

<input type="text" id="datepicker_from" name='from' size='9' value="" />  <img src='images/calender.PNG' id='icon_from' height='25px' width='25px'/ >
<input type="text" id="datepicker_to" name='from' size='9' value="" />  <img src='images/calender.PNG' id='icon_to' height='25px' width='25px'/ >

そしてあなたのJSコードで：

$( "#datepicker_from" ).datepicker();
$("#icon_from").click(function() { $("#datepicker_from").datepicker( "show" );})

$( "#datepicker_to" ).datepicker();
$("#icon_to").click(function() { $("#datepicker_to").datepicker( "show" );})

1 つのアドバイス: ID よりも ID を使用しないようにします。維持するのは難しいです。異なるDOM要素で同じことを達成したい場合は、@Pathik Gandhiが彼の答えで示したように、クラスセレクターを使用することをお勧めします: https://stackoverflow.com/a/15545224/735226

いくつかの追加メモ:

独自の JavaScript を DOM Ready イベントにラップして、DOM の読み込みが完了する前に js が実行されるのを防ぎます。これは、次のコードで実現できます。

$(document).ready(function() {
    // Place all of your JS code here, like your datepicker initializing.
});

<body>また、読み込み速度を向上させるために、タグの最後の直前に JavaScript を読み込みます。

    /* ... */
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</body>

これらは、構造化された Web 開発に関する一般的なアドバイスにすぎません。

于 2013-03-21T10:41:10.077 に答える
0

from と to の 2 つの入力を同じクラスに追加するだけで、日付ピッカーにはアイコンを表示する機能が組み込まれています。 

<script>
    $(function()
    {
           $( ".datepicker" ).datepicker({
              showOn: "button",
              buttonImage: "images/calendar.gif",
              buttonImageOnly: true
            });
    });   

    </script>
    </head>
    <body>
            <input type="text" class="datepicker" name='from' size='9' value="" />
            <input type="text" class="datepicker" name='to' size='9' value="" />
    </body>
    </html>
于 2013-03-21T10:42:20.693 に答える
0

2 つの日付ピッカーが必要な場合は、2 つの入力フィールドが必要です。

<input class="datepicker" type="text" id="fromdate" name='from' size='9' value="" />
<input class="datepicker" type="text" id="todate" name='from' size='9' value="" />

$(function(){
    $('.datepicker').datepicker()
})

デモ:フィドル

于 2013-03-21T10:43:14.117 に答える
0

のようにしてみてください

$(function(){
    $( "#from_date,$to_date" ).datepicker();        
});

あなたのhtmlは

<input type="text" id="from_date">
<input type="text" id="to_date">

それでおしまい

于 2013-03-21T10:45:14.060 に答える