how to set particular date in jquery mobile datebox control and highlight it in datepicker
I am creating one application with jquery.mobile-1.0a4.1 release. I have a page which is having input form to get details. It has date field , so for that I used jquery.mobile.datebox . See
http://dev.jtsage.com/ for its demo.
I am facing one issue with it, when I set particular date value for date field on page-load , the value is shown in textbox. But when user click on date-picker icon- the calendar still highlight today's date and show current month only.
can you please help, how to achieve like if there is any date value the text box then when you launch the datepicker, it should start from that date.
here is my code sample: for eg. here I am setting march month date, then when the user click on datepicker, the calendar should open for March month and highlight that date ,not current month.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Detailed information</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.css" />
<link type="text/css" href="jquery.mobile.datebox.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = 'text';
});
</script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile.datebox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Setting start date value on pageload
$('#startdate').val('2011-03-20');
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="inline">
<a href="daily_schedule.html" rel="external" data-icon="arrow-l">back</a>
<h1>Detailed Information</h1>
</div>
<div data-role="content">
<form action="" method="get" onsubmit="validate();" id="frmdetailedinfo">
<div data-role="fieldcontain">
<input readonly="true" name="startdate" type="date" data-role="datebox" id="startdate" data-options='{"mode": "calbox", "useDialogForceFalse": true, "noAnimation": true}'/>
</div>
<div data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button type="submit" data-theme="a" name="submit" data-icon="check" value="submit-value">
Save
</button>
</div>
</fieldset>
</div>
</form>
</div>
<!--content-->
</div>
<!--page-->
</body>
</html>