JQueryUI datepicker with both input and date picker opened

Question

I want to have a JqueryUI date picker with both its input text area and the calendar opened.

I know the two following options:

1. Use an input element and then the calendar is opened after the input field is clicked.

2. Use a div element and then there is no input field at all.

How can I get option 1, but with the calendar opened by default?

jsfiddle

$(function() {
  $("#inputDatepicker").datepicker();
  $("#divDatepicker").datepicker();
});

<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<p>Date with input:
  <input type="text" id="inputDatepicker">
</p>
<p>Date with div:
  <div id="divDatepicker">
</p>

Answer 1

I can't show you with a fiddle (somehow, this feature does not work) but try to set the focus to the input-field. Like this

$(document).ready(function() {
   $(function() {
     $("#inputDatepicker").datepicker();
     $("#inputDatepicker").focus();
   });
});

Cheers R

Answer 2

You can use the altField to do it

$(function() {
  $("#divDatepicker").datepicker({
    altField: '#inputDatepicker'
  });
});

<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>

<input type="text" id="inputDatepicker">
<div id="divDatepicker"></div>

Answer 3

Using altField and onchange event:

http://jsfiddle.net/sexaw2po/

function inputDatepickerChanged(val) {
        $("#divDatepicker").datepicker("setDate", new Date(val));
    }