jQuery日付ピッカーが入力テキストフィールドエラーに結びついています

jQueryで日付範囲のピッカーを作成し、それを入力テキストフィールドに結びつけています。jQuery日付ピッカーが入力テキストフィールドエラーに結びついています

コードは次のようになります：

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script> 

    $(document).ready(function() { 
    $("#datepicker").datepicker(); 
    }); 

    </script> 


</head> 
<body style="font-size:62.5%;"> 
    <form action="sample.php" method="post"> 

Start Date: <input type="text" name="startdate" id="datepicker"/> 
End Date: <input type="text" name="enddate" id="datepicker"/> 
<input type="submit" /> 
</form> 
</body> 
</html>

データは、開始日の入力テキストフィールドのために働いているようです。

enter image description here

しかし、私は終了日の入力テキストフィールドをクリックすると、カレンダーが表示されません：私は開始日フィールドを選択すると、カレンダーが表示されます。そのカレンダーを使用してSTARTとENDの日付を選択する必要があります。

私のコードで何かが間違っていなければなりません。誰でも私に教えてくれますか？

ありがとうございます！

出典

2012-03-19 Tristan Jade Awat

ありがとうございました。 –

Hiyaしたがって、同じid = datepickerの2要素の開始日と終了日が間違っています。

例えば、これを参照してください。http://jsbin.com/evudo

ソリューション：

、両方の入力ボックスの

Start Date: <input type="text" name="startdate" id="start_datepicker"/> 
End Date: <input type="text" name="enddate" id="end_datepicker"/>

が、それは、歓声を役に立てば幸い

$(document).ready(function() { 
     $("#start_datepicker").datepicker(); 
    $("#end_datepicker").datepicker(); 

    });

HTMLを初期化してください

出典

2012-03-19 07:46:55

両方の入力フィールドに同じIDを使用しています。この

Start Date: <input type="text" name="startdate" id="datepicker_start"/> 
End Date: <input type="text" name="enddate" id="datepicker_end"/> 


$(document).ready(function() { 
    $("#datepicker_start").datepicker(); 
    $("#datepicker_end").datepicker(); 
});

出典

2012-03-19 07:46:59

定義を試してみて、使用 id属性は、HTML要素（値は、HTML文書内で一意でなければなりません）のための一意のIDを指定し。

あなたがしよう 2つのテキストフィールドを使用して、日付範囲を持つようにしたい場合はW3schoolsからこの

var dates = j$("#trdatefrom, #trdateto").datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       maxDate: new Date(), 
       dateFormat: "yy/mm/dd", 
       onSelect: function(selectedDate) { 
         var option = this.id == "trdatefrom" ? "minDate" : "maxDate", 
           instance = j$(this).data("datepicker"), 
           date =j$.datepicker.parseDate(
             instance.settings.dateFormat || 
             j$.datepicker._defaults.dateFormat, 
             selectedDate, instance.settings); 
         dates.not(this).datepicker("option", option, date); 
       } 
     });

jquery datepicker docu

出典

2012-03-19 07:47:32 ton

これはこの特定の質問と何が関係していますか？ – redDevil

@achusonlineさんが質問の文脈で私の答えを編集しました – ton

からあなたは、要素のための... ID値を両方の要素に同じIDを与えていますその文書内で一意でなければなりません。

<script>  
$(document).ready(function() {  
     $("#datepicker1").datepicker(); });  
     $("#datepicker2").datepicker(); });  

</script> </head> 
<body style="font-size:62.5%;"> 
<form action="sample.php" method="post"> 
    Start Date: <input type="text" name="startdate" id="datepicker1"/> 
    End Date: <input type="text" name="enddate" id="datepicker2"/> 
<input type="submit" /> </form> 
</body> </html>

それとも、クラスを使用することができ、

<script>  
$(document).ready(function() {  
     $(".datepicker").datepicker(); });  
</script> </head> 
<body style="font-size:62.5%;"> 
<form action="sample.php" method="post"> 
    Start Date: <input type="text" name="startdate" class="datepicker"/> 
    End Date: <input type="text" name="enddate" class="datepicker"/> 
<input type="submit" /> </form> 
</body> </html>

出典

2012-03-19 07:49:21 redDevil

IDは、開始日と終了日のためのIDを変更してみてください、基準に従って一意である必要があります。 idをclassに置き換えてください。

Start Date: <input type="text" name="startdate" class="datepicker"/> 
End Date: <input type="text" name="enddate" class="datepicker"/> 


$(document).ready(function() { 
    $(".datepicker").datepicker(); 
    });

希望します。

出典

2012-03-19 07:52:33 Vimalnath

jQuery日付ピッカーが入力テキストフィールドエラーに結びついています

答えて

関連する問題