Here we will see how to popup calendar to
select date using JQuery. When we click on the Image a popup calendar will be
open to select date from that calendar. we can also select date and month from
DropDownList.
Now we attach JQuery File under Scripts folder of the
solution explorer.
![popupcal1.gif]()
Figure1
Add this script with head section.
<script
type="text/javascript"
src="Scripts/calendarDate.js">
</script>
Calendardate is the js file. The above
references an external .js file.
Now We attach three Images in the solution
Explorer. These images is under image folder of the solution explorer.
Image folder looks like the below Figure2.
![popupcal2.gif]()
Figure2
Now add a web form in the application.
ASPX code
<%@
Page Language="C#"
AutoEventWireup="true"
CodeBehind="Calendar.aspx.cs"
Inherits="PopupCalender.WebForm1"
%>
<!DOCTYPE
html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title></title>
<script
type="text/javascript"
src="Scripts/calendarDate.js">
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<script
type
="text/javascript">
DateInput('orderdate',
true, 'DD-MON-YYYY')
</script>
</div>
</form>
</body>
</html>
Now run the application.
![popupcal3.gif]()
Figure3
Now click on the calendar image to select previous, next and date.
![popupcal4.gif]()
Figure4
We can also select month and date using drop-down list.
![popupcal5.gif]()
Figure5
We can download Jquery File is attached
with the download link and three images.