I want to have a JqueryUI date picker with both its input text area and the calendar opened.
I know the two following options:
Use an input element and then the calendar is opened after the input field is clicked.
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?
$(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>
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
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>
Using altField and onchange event:
function inputDatepickerChanged(val) {
$("#divDatepicker").datepicker("setDate", new Date(val));
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.