Question

我在1页上有两个表单，两个表单中都有一个日期字段，用于打开datepicker javascript。

当我点击第一个表单日期字段时，我选择了一个日期，一切正常。当我点击SECOND表单时，datepicker会像平常一样弹出，但是当我选择日期时，日期会被插入到第一个表单日期字段中。

为什么？

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>

然后给你的datepickers id为datepicker1或datepicker2等。

Answer 2

你可以试试像：

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

在1页上使用带有多个表单的datepicker

2 个答案: