1ページに複数のフォームを含む日付ピッカーを使用する

Question

1ページに2つのフォームがあり、datepickerのJavaScriptを開く両方のフォームに日付フィールドがあります。

最初のフォームの日付フィールドをクリックすると、日付が選択され、すべて正常に動作します。 SECONDフォームをクリックすると、datepickerが通常のようにポップアップしますが、日付を選択すると、日付はの最初のフォームの日付フィールドに挿入されます。

なぜですか？

<script> 
$(function() { 
    $('.datepicker').datepicker({ 
     numberOfMonths: 3, 
     showButtonPanel: true 
    }); 
}); 
</script> 

私は$('.datepicker', this).datepicker({をやってみましたが、それはうまくいきませんでした：

Javascriptが似行きます！何か案は？両方のフォームのための

HTML：

<form method="post" action="contact.php" name="contactform" id="contactform"  
    class="contactform"><div class="message"></div> 
<div id="my_contact_left"> 



     <label for="name" accesskey="U"><span class="required">* 
</span>Name</label><br /> 
     <input name="name" type="text" id="name" size="30" class="name" /> 

     <br /> 
     <label for="email" accesskey="E"><span class="required">* 
</span>Email</label><br /> 
     <input name="email" type="text" id="email" size="30" class="email" 

/> 

     <br /> 
     <label for="phone" accesskey="P"><span class="required">* 
</span>Phone:</label><br /> 
     <input name="phone" type="text" id="phone" size="30" class="phone" 
/> 

     <br /> 
     <label for="dayin" accesskey="P">Day in:</label><br /> 

     <input name="dayin" type="text" id="dayin" size="30" class="dayin 
datepicker" /> 

     <br /> 
     <label for="dayout" accesskey="P">Day out:</label><br /> 
     <input name="dayout" type="text" id="dayout" size="30" 
class="dayout datepicker" /> 

</div> 
<div id="my_contact_right"> 

     <label for="comments" accesskey="C"><span class="required">* 
</span>Your Comments</label><br /> 
     <textarea name="comments" cols="40" rows="3" id="comments" 
class="comments" style="width: 350px; height:100px;"></textarea> 

     <p><span class="required">*</span>Type the validation code in 
below</p> 

     <div style="width:100px; height:40px; float:left;"><label 
for="verify" accesskey="V">&nbsp;&nbsp;&nbsp;<img src="image.php" alt="Image 
verification" 
border="0"/></label></div> 
     <div style="width:310px; height:40px; float:right;"><input 
name="verify" type="text" id="verify" class="verify" size="6" value="" style="width: 
50px;" /> 
     <input type="submit" style="margin-left:112px;" class="submit" 
id="submit" value="Send it!" /></div> 
     <div style="clear:both; width:410px;"></div> 

</div> 
<div id="clearing1"></div> 

     </form> 

Answer 1

はあなたのような何かを試すことができます：

 
//make 2 ids for date pickers instead of class 
$(function() { 
    $('#datepickerId1, #datePickerId2').datepicker({ 
     numberOfMonths: 3, 
     showButtonPanel: true 
    }); 
}); 

Answer 2

<script> 
$(function() { 
    $('#datepicker1').datepicker({ 
     numberOfMonths: 3, 
     showButtonPanel: true 
    }); 
    $('#datepicker2').datepicker({ 
     numberOfMonths: 3, 
     showButtonPanel: true 
    }); 
}); 

</script> 

その後、あなたのdatepickers datepicker1やdatepicker2のIDを与える、など