This article will show you how you can show the week no of
the year in a jQuery datepicker calendar
control in asp.net
by click on textbox.
Some of my previous articles are as follows: jQuery
Datepicker Calendar With Slide Down Effect In Asp.Net, Display
Calendar Control Selected Date Into Javascript Alert Message In Asp.Net,
jQuery
DatePicker Calendar With Slide Effect on TextBox Click In Asp.Net, jQuery
DatePicker Calendar With Fold Effect on TextBox Click In Asp.Net, jQuery
DatePicker Calendar With Drop Effect on TextBox Click In Asp.Net, jQuery
DatePicker Calendar With Clip Effect on TextBox Click In Asp.Net, jQuery
DatePicker Calendar With Blind Effect on TextBox Click In Asp.Net, jQuery
Datepicker Calendar With Fold Effect Using jQuery In Asp.Net.
So for this article first we will create a new asp.net
application and add the below reference into the header of the page.
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
After this we will add the below control into the page.
Date : <asp:TextBox runat="server" ID="txtDate"></asp:TextBox>
|
After this we will add the below jquery code into the header
of the page.
<script>
$(function () {
$("#<%=txtDate.ClientID %>").datepicker({
showWeek: true,
firstDay: 1
});
});
</script>
|
So in above code I have make true to show the week no in the
date picker. Now here is the complete code of the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery-DatePicker.aspx.cs" Inherits="WebApplication7.jQuery_DatePicker" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery DatePicker
With Week Number in Asp.Net</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("#<%=txtDate.ClientID %>").datepicker({
showWeek: true,
firstDay: 1
});
});
</script>
<style>
body{
font-size:12px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
Date :
<asp:TextBox runat="server" ID="txtDate"></asp:TextBox>
</div>
</form>
</body>
</html>
|
Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view