How to choose Month & Year alone and How to validate date using Ajax
In this artical i'm trying to explain how to choose month and year alone and how to validate date is mandatory using Ajax. For this we just add a assembly reference of AjaxControlToolkit.dll and call that namespace in page itself.
How to Choose Month & Year
Using ajax control toolkit we can achieve this to choose month and year alone. For this we just call the assembly reference of AjaxControlToolkit and call that reference in page itself and using Scriptmanager to achieve our goal. Call the scriptmanager inside a form tag with runat server. If we don't call that script manager obviously it's throwing an server error.Source Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Month-Year-Validations.aspx.cs" Inherits="Month_Year_Validations" %>
<%@ Register TagPrefix="ajaxToolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<!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></title>
<script type="text/javascript">
function Calendar_Shows() {
var calendar1 = $find("calendar1"); //Setting the default mode to month
calendar1._switchMode("months", true); //Iterate every month Item and attach click event to it
if (calendar1._monthsBody) {
for (var i = 0; i < calendar1._monthsBody.rows.length; i++) {
var row = calendar1._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call_event);
}
}
}
}
function Calendar_Hide() {
var calendar1= $find("calendar1");
//Iterate every month Item and remove click event from it
if (calendar1._monthsBody) {
for (var i = 0; i < calendar1._monthsBody.rows.length; i++) {
var row = calendar1._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call_event);
}
}
}
}
function call_event(eventElement) {
var target = eventElement.target;
switch (target.mode) {
case "month":
var calendar1= $find("calendar1");
calendar1._visibleDate = target.date;
calendar1.set_selectedDate(target.date);
calendar1._switchMonth(target.date);
calendar1._blur.post(true);
calendar1.raiseDateSelectionChanged();
break;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div align="center">
Date Validation<br />
<br />
Date :
<asp:TextBox ID="txtDate" runat="server"
Width="171px" ValidationGroup="ABC"
Height="29px" ></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="ctxtDate" runat="server" TargetControlID="txtDate" Format="MMM-yyyy"
OnClientHidden="Calendar_Hide" OnClientShown="Calendar_Shows" BehaviorID="calendar1" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Date is required!" ControlToValidate="txtDate" Display="None" ValidationGroup="ABC" />
<ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator1" />
<br />
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="ABC"
onclick="btnSubmit_Click" />
</div>
</form>
</body>
</html>OutPut:
Design a page like this then Execute the page just click on TextBox control it's open one calendar control there itself we choose month and year then automatically it's showing in the TextBox. Without enter value in textbox then click on submit button it's showing required field validator we must choose date for that without choose date field if we click button it's showing required validator.
Follow