Hello guys !
Here i'm going to show how to create dropdown calender using Jqury .
Here i'm going to show how to create dropdown calender using Jqury .
What is Jquery:
Jquery is a type of javascript library.
it is fast and rich with multiple features.It providing many features like HTML page handling ,validation, attractive UI Design it supports in multiple browser. It is lightweight .Using JQUERY you don't have to write too many line of code Jquery proivding "write les do more " functionality.
Here we go with step: 1
Open your visual studio and create new WebAppliction . now add new WebForm in ur website.
Now add css and javascript Files in your project. you can Download(css and javascript Files) from HERE.
Check All files
Step:2
Now add reference of css and jqury file .Below the Title tag.
<link href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js"></script>Step:3
Now create a Style script in WebFrom.aspx for .ui-datepicker.
<style type="text/css">
.ui-datepicker {
font-size: 10pt !important;
}
</style>
Step :4
Create Script for jquery and change control id with your control id in yellow color.
<script type="text/javascript">
$(function () {
$("#txt_btn").datepicker({
changeMonth:true,
changeYear: true,
yearRange: '1900:2020'
});
});
</script>
<asp:TextBox ID="txt_btn" runat="server"></asp:TextBox>
WebForm.aspx code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js"></script>
<style type="text/css">
.ui-datepicker {
font-size: 10pt !important;
}
</style>
<script type="text/javascript">
$(function () {
$("#txt_btn").datepicker({
changeMonth:true,
changeYear: true,
yearRange: '1900:2020'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
<br />
<br />
<br />
<div align="center">
<b>
<h2>SelectDate</h2>
</b>
<asp:TextBox ID="txt_btn" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
Step 5:
Now Run the Application. Click on TextBox.
You can Select Month from DropDown.
Selct Year .
I hope you have completed this Example Successfully.
If you have any query then feel free for comment.
