This article will show you how you can display the jQuery calendar
month and year in dropdown for selecting month and year in calendar 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: 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.
So for this article first we will create a new asp.net
application and add the below code in the page.
<%@ 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 runat="server">
<title>jQuery
DatePicker Calendar With Dropdown Month and Year 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
});
});
</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 used below mention library for making working
of the calendar control.
<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>
|
After adding this library I have used below code for
displaying control to the textbox control.
<script type="text/javascript" language="javascript">
$(function
() {
$("#<%=TextBox1.ClientID
%>").datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
|
Now we have done run the application and check the output.
DOWNLOAD
About the Author
how can i change months to spanish
ReplyDelete