DateTime Picker / Calendar in ASP.Net Visual Studio with Jquery with Sample Code
Step 1 - Download Jquery utility used in this Sample Project
-----------------------------------------------------------------------------------------------
Step 2 - Extract the above Jquery.rar And Put it in your project folder
-----------------------------------------------------------------------------------------------
Step 3 - Create a class file JQueryUtils under Util namespace as follows
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Util
{
public class JQueryUtils
{
public static void RegisterTextBoxForDatePicker(Page page, params TextBox[] textBoxes)
{
RegisterTextBoxForDatePicker(page, "dd/mm/yy", textBoxes);
}
public static void RegisterTextBoxForDatePicker(Page page, string format, params TextBox[] textBoxes)
{
bool allTextBoxNull = true;
foreach (TextBox textBox in textBoxes)
{
if (textBox != null) allTextBoxNull = false;
}
if (allTextBoxNull) return;
page.ClientScript.RegisterClientScriptInclude(page.GetType(), "jquery", "JQuery/jquery.js");
page.ClientScript.RegisterClientScriptInclude(page.GetType(), "jquery.ui.all", "JQuery/ui/jquery.ui.all.js");
page.ClientScript.RegisterClientScriptBlock(page.GetType(), "datepickerCss", "<link rel=\"stylesheet\" href=\"JQuery/themes/flora/flora.datepicker.css\" />");
StringBuilder sb = new StringBuilder();
sb.Append("$(document).ready(function() {");
foreach (TextBox textBox in textBoxes)
{
if (textBox != null)
{
sb.Append("$('#" + textBox.ClientID + "').datepicker({dateFormat: \"" + format + "\"});");
}
}
sb.Append("});");
page.ClientScript.RegisterClientScriptBlock(page.GetType(), "jQueryScript", sb.ToString(), true);
}
}
}
----------------------------------------------------------------------------------------
Step 4 - Now on your .aspx page let suppose it is Default.aspx, add a text box control as follow -
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Date Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>
-----------------------------------------------------------------------------------------------
Step 2 - Extract the above Jquery.rar And Put it in your project folder
-----------------------------------------------------------------------------------------------
Step 3 - Create a class file JQueryUtils under Util namespace as follows
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Util
{
public class JQueryUtils
{
public static void RegisterTextBoxForDatePicker(Page page, params TextBox[] textBoxes)
{
RegisterTextBoxForDatePicker(page, "dd/mm/yy", textBoxes);
}
public static void RegisterTextBoxForDatePicker(Page page, string format, params TextBox[] textBoxes)
{
bool allTextBoxNull = true;
foreach (TextBox textBox in textBoxes)
{
if (textBox != null) allTextBoxNull = false;
}
if (allTextBoxNull) return;
page.ClientScript.RegisterClientScriptInclude(page.GetType(), "jquery", "JQuery/jquery.js");
page.ClientScript.RegisterClientScriptInclude(page.GetType(), "jquery.ui.all", "JQuery/ui/jquery.ui.all.js");
page.ClientScript.RegisterClientScriptBlock(page.GetType(), "datepickerCss", "<link rel=\"stylesheet\" href=\"JQuery/themes/flora/flora.datepicker.css\" />");
StringBuilder sb = new StringBuilder();
sb.Append("$(document).ready(function() {");
foreach (TextBox textBox in textBoxes)
{
if (textBox != null)
{
sb.Append("$('#" + textBox.ClientID + "').datepicker({dateFormat: \"" + format + "\"});");
}
}
sb.Append("});");
page.ClientScript.RegisterClientScriptBlock(page.GetType(), "jQueryScript", sb.ToString(), true);
}
}
}
----------------------------------------------------------------------------------------
Step 4 - Now on your .aspx page let suppose it is Default.aspx, add a text box control as follow -
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Date Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>
-------------------------------------------------------------------------------------------
Step 5 - Now in the code page of above .aspx page (step4) Default.aspx.cs add following line of code in page load event
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Util.JQueryUtils.RegisterTextBoxForDatePicker(Page, TextBox1);
}
}
* Please note above underline control name is same as in .aspx page.
-------------------------------------------------------------------------------------------
