在一页上使用具有多个表单的日期选择器

Question

我在一页上有 2 个表单，两个表单中都有一个日期字段，可打开日期选择器 javascript。

当我单击第一个表单日期字段时，我选择一个日期并且一切正常。 当我单击第二个表单时，日期选择器会像平常一样弹出，但是当我选择日期时，日期会插入到第一个表单日期字段中。

这是为什么？

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 等 id。

Answer 2

你可以尝试这样的事情：

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