Datepicker gebruiken met meerdere formulieren op 1 pagina

Ik heb 2 formulieren op 1 pagina en een datumveld in beide vormen die de datepicker JavaScript openen.

Wanneer ik op het veld voor de eerste formulierdatum klik, selecteer ik een datum en alles werkt goed. Wanneer ik op het TWEEDE formulier klik, verschijnt de datepicker zoals normaal, maar wanneer ik een datum selecteer, wordt de datum ingevoegd in het veld eerste formulieren.

Waarom is dat?

Javascript gaat als volgt:

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

Ik heb geprobeerd om $ ('. Datepicker', this) .datepicker ({] te doen, maar het werkte niet! Heb je ideeën?

HTML voor beide vormen:

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



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

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

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

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

<input name="dayout" type="text" id="dayout" size="30" class="dayout datepicker" /> </div> <div id="my_contact_right">

*Type the validation code in below

<div style="width:100px; height:40px; float:left;"></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>
1
toon je html-code
toegevoegd de auteur David Nguyen, de bron

2 antwoord

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

</script>

Geef uw datepickers dan een id van datepicker1 of datepicker2, etc.

3
toegevoegd

Kun je iets proberen als:

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

1
toegevoegd
Ja, ik probeerde dit te vermijden, omdat ik misschien nog veel meer formulieren zou toevoegen en niet nog een ID wilde toevoegen (niet zoals het een missie was) - ik dacht dat er een eenvoudige manier was in plaats van het toevoegen van verschillende id's alle tijd
toegevoegd de auteur Reflex84, de bron