Combine inline jquery datepicker with an input field?

Question

I know that I can use $('div').datepicker() to get an inline datepicker, but how do I show the datepicker fixed inline underneath its input field?

The alt field option does not work for me because I want the datepicker to also react on a date entered into the input field.

I would need something like the following pseudocode:

<inputfield type="text" id="d" >
<div id="z"></div>  
<script> $('#z').datepicker().bindToInputfield($('#d')) </script>

Answer 1

It's not possible to get the datepicker inline just by using the input field . You need to use a div along with an input to get what you want.

NOTE: Any changes made in the input will reflect in the datepicker

Example Code

<input type="text" id="text" />
<div id="mydiv"></div>
<script>
$('#mydiv').datepicker();

$('#text').change(function(){
    $('#mydiv').datepicker('setDate', $(this).val());
});
$('#mydiv').change(function(){
    $('#text').attr('value',$(this).val());
});
</script>

Check out this jsfiddle I've created for you: http://jsfiddle.net/v9XCP/

Answer 2

Try this: Working demo http://jsfiddle.net/KRFCH/

The altField option will link to the second field you want! http://jqueryui.com/datepicker/#alt-field

Now note: any change in the input will reflect in the datepicker on change

This should fit your cause :)

Code

$('#z').datepicker({
    inline: true,
    altField: '#d'
});

$('#d').change(function(){
    $('#z').datepicker('setDate', $(this).val());
});