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

Change-Reduce size of jquery datepicker in

Jul 24, 2012

In this article I will explain how to reduce or change size of JQuery UI datepicker control or calendar control in
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 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 {
Once we write this custom css class our code will be like this

<html xmlns="">
<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() {
<style type="text/css">
.ui-datepicker {
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
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,, 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


Give your Valuable Comments

Other Related Posts

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