JQuery datepicker behaviour - php

Question

I've been trying for the last days to get this thing to work.
Have two datepickers much like start and end date demo but cannot have them to work. This code works on the body of a page, but not on the header where I would like to have a search bar.
<script type="text/javascript">
$(function() {
$( "#from" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<form method="post" name="top_search_form" action="<?php bloginfo('wpurl');?>/?page_id=13" style="z-index:inherit">
<input type="hidden" name="a" value="dosearch"/>
<input id="top_search_input" placeholder="Procurar..." style="z-index:inherit" type="text" name="keywordphrase" value=""/>
<input type="text" id="from" name="searchstartdate" placeholder="Partida" class="from" style="z-index:inherit"/>
<input type="text" id="to" name="searchenddate" placeholder="Chegada" class="to" style="z-index:inherit"/>
<input id="top_search_button" type="submit" value="Search" style="z-index:inherit">
</form>
Can anyone help me please?

Answer 1

Move the setup outside of the function() you're using for some reason the date picker doesn't like that/doesn't hook to the boxes correctly.
Here's how I do it and it works fine.
Start : <input type="text" name="startdate" id="startdate" value="<?php echo $startdate;?>" />
End : <input type="text" name="enddate" id="enddate" value="<?php echo $enddate;?>" />
<script>
//date popup instigation
$( "#startdate" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
$( "#startdate" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#startdate" ).datepicker( "option", "showAnim", "blind" );
$( "#enddate" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
$( "#enddate" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#enddate" ).datepicker( "option", "showAnim", "blind" );
</script>

Answer 2

may be your header has a different php page. So in your header page include .js files and the code for datepicker. Hope it will work for you.

Answer 3

I would use classes instead of id's, I would also place the Javascript and the end of the document, this should fix your issue.
<form method="post" name="top_search_form" action="<?php bloginfo('wpurl');?>/?page_id=13" style="z-index:inherit">
<input type="hidden" name="a" value="dosearch"/>
<input id="top_search_input" placeholder="Procurar..." style="z-index:inherit" type="text" name="keywordphrase" value=""/>
<input type="text" id="from" name="searchstartdate" placeholder="Partida" class="from" style="z-index:inherit"/>
<input type="text" id="to" name="searchenddate" placeholder="Chegada" class="to" style="z-index:inherit"/>
<input id="top_search_button" type="submit" value="Search" style="z-index:inherit">
</form>
<script type="text/javascript">
$(document).ready({
$( ".from" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( ".to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( ".to" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( ".from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>