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?

Answer 1

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());
});

Answer 2

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/