After spending numerous frustrating hours (OK maybe minutes) to get a decent example of implementing the jQuery UI date picker in ASP.NET I decide to jot it down here. First download it if you don’t have it yet here.
First you want to reference the stylesheet:
<link href="CSS/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
(I selected the ui-lightness theme when I downloaded and placed it in the CSS folder I created – this should go into the HEAD section of your aspx page)
Next you need to reference the script files (in the aspx body section):
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script src="js/ui/ui.core.js" type="text/javascript"></script>
<script src="js/ui/ui.datepicker.js" type="text/javascript"></script>
(I copied the scripts to a the js folder I created)
Now add a textbox to the page that will pop-up the calendar when selected receive the date selected, I named mine txtValue1. Also set the CssClass:
<asp:TextBox ID="txtValue1" runat="server" CssClass="ui-datepicker" Visible="true"></asp:TextBox>
Finally you need the JavaScript to pop the date picker (I added it to the top of the page in the body section after the previous script references):
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtValue1.ClientID %>").datepicker();
});
</script>
And that’s about it!
If you have hassles, make sure that the stylesheet and script files are correctly referenced.
Tags: ASP.NET, datepicker, jQuery