Step 1: Add jQuery and jQuery UI Javascript and CSS files to your project.
The jQuery files can be found here and the jQuery UI files can be found here, Or you can just download the sample project using the link at the end of this post.
Step 2: Adding References to the .js and .css files.
You can add the references to each page you plan to use your controls on, or if you are using mater pages you can add the references there.<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>One More IT Blog</title>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.1.custom.css" />
<link rel="stylesheet" href="Scripts/chosen/chosen.css" />
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-ui-1.10.1.custom.js"></script>
<script src="Scripts/chosen/chosen.jquery.js"></script>
Step 3: Create a class extending the TextBox or the TextBoxReqValidator control created in one of the previous posts.
public class TextBoxReqValidator : TextBoxReqValidator
{
Step 4: Add Additional Properties.
We will use these properties to specify the name of the start and end of range user controls. #region Properties
/// <summary>
/// Name of the From Control
/// </summary>
[Browsable(true)]
[Description("From Date Control"), Category("Custom"), DefaultValue("")]
public virtual String FromControl
{
get
{
object o = ViewState["FromProp"];
if (o != null)
return (String)o;
return "";
}
set
{
String oldValue = FromControl;
if (value != oldValue)
{
ViewState["FromProp"] = value;
}
}
}
/// <summary>
/// Name of the Thru Control
/// </summary>
[Browsable(true)]
[Description("Thru Date Control"), Category("Custom"), DefaultValue("")]
public virtual String ThruControl
{
get
{
object o = ViewState["ThruProp"];
if (o != null)
return (String)o;
return "";
}
set
{
String oldValue = ThruControl;
if (value != oldValue)
{
ViewState["ThruProp"] = value;
}
}
}
#endregion Step 5: OnPreRender
We will register our script in the OnPreRender method. We will only register our script if the control is enabled. First we will check if the FromControl property is set, if it is we know that our control specifies the end of the date range. If the FromControl property was not set we will check the ThruControl property, if it is set we know that our control specifies the beginning of the date range. If both properties are not set we will treat our control as a standard date picker. #region Pre Render
/// <summary>
/// PreRender
/// </summary>
/// <param name="e"></param>
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (Enabled == true)
{
// Check to see if the client script is already registered.
if (!this.Page.ClientScript.IsStartupScriptRegistered(String.Format("jQuery_{0}", this.ClientID)))
{
String script = string.Empty;
if (FromControl != string.Empty)
{
script = "$(document).ready(function(){$('#" +
this.ClientID + "').datepicker(" +
" {defaultDate: \"+1w\", changeMonth: true," +
" numberOfMonths: 3,onClose: function( selectedDate ) {" +
" $( '#" + FindControl(FromControl).ClientID + "' ).datepicker( \"option\", \"maxDate\", selectedDate );" +
"}}); });";
}
else if (ThruControl != string.Empty)
{
script = "$(document).ready(function(){$('#" +
this.ClientID + "').datepicker(" +
" {defaultDate: \"+1w\", changeMonth: true,"+
" numberOfMonths: 3,onClose: function( selectedDate ) {"+
" $( '#"+ FindControl(ThruControl).ClientID+"' ).datepicker( \"option\", \"minDate\", selectedDate );"+
"}}); });";
}
else
{
script = "$(document).ready(function(){$('#" +
this.ClientID + "').datepicker(); });";
}
script = "<script type=\"text/javascript\">" + script + "</script>";
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), String.Format("jQuery_{0}", this.ClientID), script, false);
}
}
}
#endregion
Usage Example:
In the example below notice the FromControl and ThruControl properties.Markup
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="DateControlsDemo.aspx.cs" Inherits="CustomControls.DateControlsDemo" %>
<%@ Register Assembly="CustomControls" Namespace="CustomControls.Controls" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<cc1:DateRangePickerJQ runat="server" ID="FromControl" ThruControl="ThruControl"></cc1:DateRangePickerJQ>
<cc1:DateRangePickerJQ runat="server" ID="ThruControl" FromControl="FromControl"></cc1:DateRangePickerJQ>
<br />
<asp:Button ID="Submit" runat="server" CausesValidation="true" Text="Submit" />
</asp:Content>
No comments:
Post a Comment