Friday, October 12, 2012

Adding jquery calendar control to DotNetNuke module



jQuery provides with calendar and they call it datepicker
DotNetNuke provides with inbuilt jquery.js and jquery-ui.js so you don't have to bother to link them separately
In regular html / asp.net application you would have to add following lines in <head> tag
     <script src="http://code.jquery.com/jquery-1.8.2.js"></script>     <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />

You dont need them in DNN.
If you are developing a custom DNN module add this to your user control view.ascx file.
I have txtStartDate as a text field on the form where I wanted my calander to be rendered on click.
To achieve this I added this code at the top of my ascx page after the standard includes.
<script type="text/javascript" >
$(function () {
    $("#<%= txtStartDate.ClientID %>").datepicker();
});
</script>
The calender takes the size based on your text size if it is appearing bigger that your expectation
set it style like this
<style>
div.ui-datepicker{
font-size:10px;
}
</style> 

1 comment:

Anonymous said...

Hi Vishwajit,

Very interesting post ,thanks for sharing.looking forward for more posts like this.







Dotnetnuke cms