In this post
Asp.Net jQuery UI Datepicker position adjustment we shall
see on how to alter the display position of the datepicker control.
By default the datepicker is displayed just below the
textbox controls to which it is tagged to, we can alter the position of the datepicker by altering the marginTop & marginLeft properties of the datepicker.
Add an asp:TextBox control to the page and add
the below jQuery script.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Date
Picker</title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script type="text/javascript">
$(function() {
$("#txtDatePickerPosition").datepicker({
changeYear: true,
beforeShow: function(input, inst) {
inst.dpDiv.css({
marginTop: (-input.offsetHeight) + 'px',
marginLeft: input.offsetWidth + 'px'
});
}
});
});
</script>
</head>
<body>
<form id="frmDatePicker" runat="server">
<table>
<tr>
<td>Date Picker Position</td>
<td><asp:TextBox
id="txtDatePickerPosition"
runat="server"
ReadOnly="true"></asp:TextBox>
</td>
</tr>
</table>
</form>
</body>
</html>
For a full example covering all posible scenarios in using a jQuery
UI Datepicker control refer to the post Asp.Net jQuery UI Datepicker Tutorial.
Related Posts
Related Posts
