Up until now, We have to use Javascript for the sake of a simpler code (light weight) and client side script for Accessible Rich Internet Applications (ARIA). Javascript is very useful and it is tedious sometime when you are a beginner at Javascript. The following sample show you how to check Start Date and End Date with ECMA script (well-known dialects such as JavaScript). When Start Date you entered is large than Today Date, it show Alert, and End Datse is also. If End Date you typed is less than Start Date, it show Alert and set the End Date' value to the same Start Date' value. Let's start here.
 |
| Check Date with Javascript |
Here is the javascript to <head> tag.
<script type="text/javascript">
function ValidateStartDate() {
var SDate = document.getElementById('stDateTxt').value;
var EDate = document.getElementById('enDateTxt').value;
var stDate = new Date(SDate);
var enDate = new Date(EDate);
if (stDate != '' && enDate != '' && stDate > enDate) {
alert('Start Date is greater than End Date!');
document.getElementById('stDateTxt').value = EDate;
}
else if (stDate != '') {
var today = new Date();
if (stDate > today) {
alert('Select Date is greater than today!');
document.getElementById('stDateTxt').value = '';
document.getElementById('stDateTxt').focus();
}
}
}
function ValidateEndDate() {
var SDate = document.getElementById('stDateTxt').value;
var EDate = document.getElementById('enDateTxt').value;
var stDate = new Date(SDate);
var enDate = new Date(EDate);
if (stDate != '' && enDate != '' && enDate < stDate) {
alert('End Date is less than Start Date!');
document.getElementById('enDateTxt').value = SDate;
}
else {
var today = new Date();
if (enDate > today) {
alert('Select Date is greater than today!');
document.getElementById('enDateTxt').value = '';
document.getElementById('enDateTxt').focus();
}
}
}
</script>
Server controls are here in <form> tag.
<form id="form1" runat="server"><table>
<tr>
<td align="right" style="height: 28px; width: 90px;">
<asp:Label ID="lbDateFrom" runat="server" Text="Date From:"></asp:Label>
</td>
<td style="width: 290px; height: 28px;">
<asp:TextBox ID="stDateTxt" runat="server" Width="85px" Test="" MaxLength="10"></asp:TextBox>
MM/dd/yyyy
</td>
</tr>
<tr>
<td align="right" style="height: 28px; width: 90px;">
<asp:Label ID="lbDateTo" runat="server" Text="Date To:"></asp:Label>
</td>
<td style="width: 290px; height: 28px;">
<asp:TextBox ID="enDateTxt" runat="server" Width="85px" Text="" MaxLength="10"></asp:TextBox>
MM/dd/yyyy
</td>
</tr>
</table>
</form>
Add the code in code-behind as below.
protected void Page_Load(object sender, EventArgs e)
{
stDateTxt.Attributes.Add("onblur", "ValidateStartDate();");
enDateTxt.Attributes.Add("onblur", "ValidateEndDate();");
}
Javascript focus() property don't work in Firefox. That's it!
