Introduction:
In this article I will explain how to reduce or change size of JQuery UI datepicker control or calendar control in asp.net.
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
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 Email
|
|||
|
|
0 comments :