Introduction:
Here I will explain JQuery UI datepicker or calendar control example in asp.net or how to display or show the JQuery UI Date picker control when click on textbox in asp.net.
Here I will explain JQuery UI datepicker or calendar control example in asp.net or how to display or show the JQuery UI Date picker control when click on textbox in asp.net.
If we want to make it beautiful again we need to write some custom css classes based on this postchange ajax calendar control style.
Instead of making all these changes its better we can use JQuery UI calendar control. We can easily integrate JQuery UI calendar control in website, we have many other options available with this control and we can easily change the themes I hope more than 20 + readymade themes are available for this Calendar control.
First open Visual Studio and create new website after that write following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</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 !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>
If you observe above code in header section I added some of script files and css classes by using those files we will display calendar control with beautiful css style.You can get those files by downloading attached sample.
After completion of aspx page design and your code modifications just run your application and check your calendar control that would be like below demo
Demo
how to write validation control between two dates with in 30 days using with jquery
ReplyDeleteHi I have tried the above code in my Default.aspx page and its working fine but if I use the same code in my content page then it will not work..
ReplyDeleteReply
Regards,
Ganesh.