" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
Datepicker is a rich widget of jQuery library . It exposes a lot of properties and methods to make it customizable . Once, while working with it , we needed to popup the datepicker just at side of the textbox . But the default popup position is just below the text box so we had to work around to make it appear at the side..
The following code block in document.ready method demonstrates the hack:
$('#txtDateTo,#txtDateFrom').datepicker({
changeYear: true,
beforeShow: function (textbox, instance) {
instance.dpDiv.css({
marginTop: (-textbox.offsetHeight) + 'px',
marginLeft: textbox.offsetWidth + 'px'
});
}
});
In the same way we can set the position of the popup where ever needed just by setting “marginTop” and “marginLeft” attributes.
Here beforeShow() is the method exposed by datepicker widget. We can get more from
http://jqueryui.com/demos/datepicker/
For demo you can copy paste the folowing code in a file and save it with .html extension . Run in browser (Allow block content for IE)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Datepicker Demo</title>
<style type="text/css">
div.ui-datepicker
{
font-size: 10px;
}
</style>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/start/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#txtDateFrom,#txtDateTo').datepicker({
changeYear: true,
beforeShow: function (textbox, instance) {
instance.dpDiv.css({
marginTop: (-textbox.offsetHeight) + 'px',
marginLeft: textbox.offsetWidth + 'px'
});
}
});
});
</script>
</head>
<body>
<form id="testForm" runat="server">
<div>
<input type="text" id="txtDateFrom" /><br />
<input type="text" id="txtDateTo" />
</div>
</form>
</body>
</html>