how to set particular date in jquery mobile datebox control, 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 开发者_如何学CI 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.
If anybody has used the same control then please help about , 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. For eg. here I am setting date of March month, then ,when user clicks on datepicker , march month calendar should be shown.
Here is my code file.
<!DOCTYPE html>
<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>
You have to set it in the tag itself:
<input readonly="true"
name="startdate"
type="date"
data-role="datebox"
id="startdate"
data-options='{
"mode": "calbox",
"useDialogForceFalse": true,
"noAnimation": true
}'/>
Becomes this
<input readonly="true"
name="startdate"
type="date"
data-role="datebox"
id="startdate"
data-options='{
"mode": "calbox",
"useDialogForceFalse": true,
"noAnimation": true,
"defaultDate": "1999-03-20" // Add Default Date
}'/>
加载中,请稍侯......
精彩评论