jQuery Datepicker, display 2 differently datepickers on same page

Question

I am using a the jQuery [Datepicker][1] in a website. I am having trouble displaying 2 datepickers on the same page in different ways.

One which will only display once you click the text box, and once you select your date it disappears. Second I would like to display inline, but I cannot control one with out the other messing up.

I need help finding a work around so I can use 2 datepickers in a different way on the same page. I tried giving the second a separate id but that didn't work.

My first Date picker code:

<script> <!-- Datepicker -->
$(function() {
$( ".datepicker" ).datepicker();
});
</script>

<input type="text" class="search-input datepicker" placeholder="Check-In">

<input type="text" class="search-input datepicker" placeholder="Check-Out">

Here is my second Date picker code:

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

<p><input type="text" id="datepicker2"></p>

Thank you

Answer 1

Simply give each text box a unique ID, then use that to create the datepicker. You can then put whichever options you want inside each datepicker() call:

$(function() 
{
    $( "#datepicker1" ).datepicker();
    $( "#datepicker2" ).datepicker();
});

HTML:

<p><input type="text" id="datepicker1"></p>
<div id="datepicker2"></div>

jsfiddle

Answer 2

I've done it before, my solution:

<script> <!-- Datepicker -->
$(function() 
{
    $( "#datepicker1" ).datepicker();
    $( "#datepicker2" ).datepicker();
});
</script>

<input type="text" class="search-input datepicker" placeholder="Check-In">

<input type="text" class="search-input datepicker2" placeholder="Check-Out">

Maybe there's any better solution?