Archive

Archive for the ‘AJAX’ Category

Disable Future Dates in AJAX Control Toolkit Calendar Extender Control in ASP.Net

August 6, 2015 Leave a comment

Hi all,

Try this example to Disable Future Dates in AJAX Control Toolkit Calendar Extender Control in ASP.Net

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<asp:TextBox ID="txtCalendar" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtCalendar"></asp:CalendarExtender>
</form>
</body>
</html>

In Code behind :

protected void Page_Load(object sender, EventArgs e)
{
//To Disable the Future Dates in CalendarExtender control
CalendarExtender1.EndDate = DateTime.Now;
}

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net

Calculate Age from Selected Date in AJAX Calender Extender Using Javascript

May 9, 2014 1 comment

Dear all,

try this example to Calculate age from Selected Date in AJAX Calender Extender Using Javascript


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="txtDate" runat="server" />
<asp:ImageButton runat="server" ID="imgPopup" ImageUrl="~/Images/Calendar.png" />
<cc1:CalendarExtender ID="CalendarExtender1" OnClientDateSelectionChanged="DateSelectionChanged"
runat="server" TargetControlID="txtDate" PopupButtonID="imgPopup" />
<script type="text/javascript">
function DateSelectionChanged(e) {
var today = new Date();
var dob = e.get_selectedDate();
var months = (today.getMonth() - dob.getMonth() + (12 * (today.getFullYear() - dob.getFullYear())));
alert("Your age: " + Math.round(months / 12));
}
</script>
</form>
</body>
</html>

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net, Javascript

Validate Age when Date is selected in ASP.Net AJAX CalendarExtender Control

August 1, 2013 Leave a comment

Hi all,

try this example to Validate Age when Birth Date is selected in ASP.Net AJAX Calendar Extender Control

1) Open VS 2008 and create a new website

2) Add new web page and from ToolBox drag and drop Script Manager, TextBox and AJAX Calender Controls

For Example we want to stop user if his/her Age is less than 20 years


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server" />
 <asp:TextBox ID="txtDate" runat="server" />
 <asp:ImageButton runat="server" ID="imgPopup" ImageUrl="~/Images/Calendar.png" />
 <cc1:CalendarExtender ID="CalendarExtender1" OnClientDateSelectionChanged="DateSelectionChanged"
 runat="server" TargetControlID="txtDate" PopupButtonID="imgPopup" />
 <script type="text/javascript">
 function DateSelectionChanged(e) {
 var today = new Date();
 var dob = e.get_selectedDate();
 var months = (today.getMonth() - dob.getMonth() + (12 * (today.getFullYear() - dob.getFullYear())));
 var age = Math.round(months / 12);
 if (age < 20) {
 alert("Error Age is less than 20");
 }
 }
 </script>
 </form>
</body>
</html>

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net, Javascript

Display No Data Found with AJAX AutoComplete Extender

July 29, 2013 Leave a comment

Hi all,

try this example to Display No Data Found Message with AJAX AutoComplete Extender

1) Open VS 2008 and create new web site

2) Add new web page and from Toolbox drag and drop ScriptManager , TextBox and AJAX AutoComplete Controls


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <style type="text/css">
 body
 {
 font-family: Arial;
 font-size: 10pt;
 }
 .autocomplete_completionListElement
 {
 margin: 0px !important;
 background-color: white;
 color: windowtext;
 border: buttonshadow;
 border-width: 1px;
 border-style: solid;
 cursor: 'default';
 overflow: auto;
 max-height: 200px;
 text-align: left;
 list-style-type: none;
 padding: 0px;
 }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
 </asp:ScriptManager>
 <asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
 <cc1:AutoCompleteExtender ServiceMethod="SearchCustomers" MinimumPrefixLength="2"
 CompletionInterval="100" EnableCaching="false" CompletionSetCount="10" TargetControlID="txtContactsSearch"
 ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false" CompletionListCssClass="autocomplete_completionListElement"
 OnClientItemSelected="OnClientItemSelected">
 </cc1:AutoCompleteExtender>
 <script type="text/javascript">
 function OnClientItemSelected(sender, args) {
 var value = args.get_value();
 if (value == "No data found.") {
 $get("<%=txtContactsSearch.ClientID %>").value = "";
 }
 }
 </script>
 </div>
 </form>
</body>
</html>

In code behind :


[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> SearchCustomers(string prefixText, int count)
{
 using (SqlConnection conn = new SqlConnection())
 {
 conn.ConnectionString = ConfigurationManager
 .ConnectionStrings["constr"].ConnectionString;
 using (SqlCommand cmd = new SqlCommand())
 {
 cmd.CommandText = "select ContactName from Customers where " +
 "ContactName like @SearchText + '%'";
 cmd.Parameters.AddWithValue("@SearchText", prefixText);
 cmd.Connection = conn;
 conn.Open();
 List<string> customers = new List<string>();
 using (SqlDataReader sdr = cmd.ExecuteReader())
 {
 while (sdr.Read())
 {
 customers.Add(sdr["ContactName"].ToString());
 }
 }
 conn.Close();
 if (customers.Count == 0)
 {
 customers.Add("No data found.");
 }
 return customers;
 }
 }
}

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net

Disable Past Dates in AJAX Calender

January 3, 2013 Leave a comment

Hi all,

In previous post i show you how to allow user to select only first date of month

Allow User to Select only First day of month in AJAX Calender

in this post i will show how to prevent user to select past dates in AJAX Calender

1) Open VS2008 and create a new website

2) Add new Page and from Toolbox drag ScriptManager , TextBox and AJAX Calender Controls.

3) Add This Javascript function


<script type="text/javascript">
 function checkDate(sender, args) {
 if (sender._selectedDate < new Date()) {
 alert("You cannot select a day earlier than today!");
 sender._selectedDate = new Date();
 // set the date back to the current date
 sender._textbox.set_Value(sender._selectedDate.format(sender._format))
 }
 }
 </script>

4) Your page will be like this


<asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 Please Select Date
 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
 <asp:CalendarExtender ID="CalendarExtender1" BehaviorID="CalendarExtender1" runat="server"
 TargetControlID="TextBox1" PopupButtonID="TextBox1" OnClientDateSelectionChanged="checkDate">
 </asp:CalendarExtender>

Hope this helps

Good Luck

Categories: AJAX, ASP.Net

Allow User to Select only First day of month in AJAX Calender

November 10, 2012 Leave a comment

Hi all,

try this example to Allow User to Select only First day of month in AJAX Calender

1) Open VS2008 and create a new website

2) Add New Web Page and from Toolbox drag ScriptManager , TextBox and AJAX Calender Controls

3) Add This Javascript function


<script language="javascript" type="text/javascript">
 function CheckDate(sender, args) {
 alert(sender._selectedDate.getDate());
 if (sender._selectedDate.getDate() != 1) {
 alert("Only first date are allowed.");
 // Cancel selected the date
 sender._textbox.set_Value("")
 }
 }
</script>

4) Your Page will be like that


<div>
 Select Date :
 <asp:TextBox ID="txt_Date" runat="server"></asp:TextBox>
 <cc1:CalendarExtender ID="txt_Date_CalendarExtender" runat="server"
 Enabled="True" TargetControlID="txt_Date" OnClientDateSelectionChanged="CheckDate">
 </cc1:CalendarExtender>
</div>

Hope this helps

Good Luck

Categories: AJAX, ASP.Net, Javascript

Disabling Past Dates in AJAX Calendar

September 13, 2012 Leave a comment

Hi all,

try this example to disable past dates in AJAX Calender

1) Open VS2008 and create a new website

2) Add New Web Page and from Toolbox drag ScriptManager , TextBox and AJAX Calender Controls

3) Add This Javascript function


<script language="javascript" type="text/javascript">
 function CheckForPastDate(sender, args) {
 var selectedDate = new Date();
 selectedDate = sender._selectedDate;
 var todayDate = new Date();
 if (selectedDate.getDateOnly() < todayDate.getDateOnly()) {
 sender._selectedDate = todayDate;
 sender._textbox.set_Value(sender._selectedDate.format(sender._format));
 alert("Date Cannot be in the past.");
 }
 }
 </script>

4) Your Page will be like that


<div>
 Select Date :
 <asp:TextBox ID="txt_Date" runat="server"></asp:TextBox>
 <cc1:CalendarExtender ID="txt_Date_CalendarExtender" runat="server"
 Enabled="True" TargetControlID="txt_Date" OnClientDateSelectionChanged="CheckForPastDate">
 </cc1:CalendarExtender>
 </div>

Hope this helps

Good Luck

Categories: AJAX, ASP.Net, Javascript