Post
Ask Question

Popup calendar in ASP.NET

Introduction

 
Here we will see how to popup calendar toselect date using JQuery. When we click on the Image a popup calendar will beopen to select date from that calendar. we can also select date and month fromDropDownList.
 
Now we attach JQuery File under Scripts folder of thesolution explorer.
 
popupcal1.gif
 
Figure 1
 
Add this script with the head section.
  1. <script type="text/javascript" src="Scripts/calendarDate.js">  
  2.    
  3. </script> 
Calendardate is the js file. The abovereferences an external .js file.
 
Now We attach three Images in the solutionExplorer. These images are under the image folder of the solution explorer.Image folder looks like the below Figure2.
 
popupcal2.gif
 
Figure 2
 
Now add a web form in the application.
 
ASPX code
  1. <%@ 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">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head runat="server">  
  4.         <title></title>  
  5.         <script type="text/javascript" src="Scripts/calendarDate.js"></script>   
  6.     </head>  
  7.     <body>  
  8.         <form id="form1" runat="server">  
  9.             <div>  
  10.                 <script type="text/javascript">DateInput('orderdate', true, 'DD-MON-YYYY') </script>   
  11.             </div>  
  12.         </form>  
  13.     </body>  
  14. </html>
Now run the application.
popupcal3.gif
 
Figure 3
 
Now click on the calendar image to select the previous, next, and date.
 
popupcal4.gif
Figure 4
 
We can also select month and date using a drop-down list.
 
popupcal5.gif
Figure 5
 
We can download Jquery File is attachedwith the download link and three images.