Использование DatePicker с несколькими формами на 1 странице

Question

У меня есть 2 формы на 1 странице и поле даты в обеих формах, которые открывают javascript datepicker.

Когда я щелкаю поле даты первой формы, я выбираю дату, и все работает хорошо.Когда я щелкаю форму ВТОРАЯ, средство выбора даты появляется как обычно, но когда я выбираю дату, она вставляется в поле даты first .

Почему это так?

Javascript выглядит так:

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

Я пытался сделать $('.datepicker', this).datepicker({, но это не сработало!Есть идеи?

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

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

</script>

Затем присвойте указателям даты идентификатор datepicker1 или datepicker2 и т. Д.

Answer 2

Можете ли вы попробовать что-то вроде:

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