This article will show you how you can display the jQuery
calendar with multiple months control in
asp.net . In this article I have used asp.net, asp.net textbox control and
jQuery date picker control.
Some of my previous articles are as follows: jQuery
DatePicker Calendar With Dropdown Month and Year in Asp.Net, Displaying
More than One Month in the Windows Forms MonthCalendar Control Using C#.Net, How
to get the selected date of a MonthCalendar control in C#, jQuery
UI Calender Open With LightBox Effect in Asp.Net MVC, How
to Use jQuery Calender In MVC3 | jQuery UI Datepicker Calender Control In
Asp.Net Mvc Application, jQuery
DateTime Picker Calender In ASP.NET MVC | How To Access jQuery DateTime Picker
Calender Value in MVC Controller.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DateTimePicker.aspx.cs"
Inherits="ProjectDemo_Asp.et.DateTimePicker" %>
<!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 id="Head1"
runat="server">
<title>jQuery
Datepicker Calendar With Multiple Months in Asp.net</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
body
{
font-size:
70%;
}
</style>
<script type="text/javascript" language="javascript">
$(function
() {
$("#<%=TextBox1.ClientID
%>").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>
</head>
<body>
<form id="form1"
runat="server">
<div>
<p>
Date Of Birth: <asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox>
</p>
</div>
</form>
</body>
</html>
|
In above code I have added below mention jQuery library reference
and jQuery code.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
body
{
font-size:
70%;
}
</style>
<script type="text/javascript" language="javascript">
$(function
() {
$("#<%=TextBox1.ClientID
%>").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>
|
Now run the application to view the output.
About the Author
0 comments:
Please let me know your view