Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Change-Reduce size of jquery datepicker in asp.net

Jul 24, 2012
Introduction:

In this article I will explain how to reduce or change size of JQuery UI datepicker control or calendar control in asp.net.
Description:
  
In previous post I explained many articles relating to JQuery UI datepicker. During work with JQuery UI Datepicker I face problem to reduce or change the size of datepicker control in asp.net at that time I decided it’s better to write article on this. By default if we use JQuery UI datepicker control it will like this

If we want to reduce size of calendar control we need write custom css class like as shown below


<style type="text/css">
.ui-datepicker {
 font-size:8pt;
 font-family:Verdana;
 }
</style>
Once we write this custom css class our code will be like this


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Reduce size of JQuery UI Datepicker </title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtDate").datepicker();
});
</script>
<style type="text/css">
.ui-datepicker {
 font-size:8pt;
 font-family:Verdana;
 }
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>
Now run the application and see the calendar control that will be like as shown below

If you want get this calendar control script files check these links JQuery UI Datepicker Control

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

0 comments :

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.