Description:-
In this example we explain that how to validate end date should be greater than start
date and allow user to select only dates within range of dates using jquery
date picker in asp.net. Or how to validate
End date should be greater than Start date when using two query Date Pickers
Here we explain that how to disable all previous
dates from the date picker based on the start date selected by the user from
the date picker. Here we disable the dates that is lower than the start date
when user is select the end date from the jquery date picker.
Sometime you have requirement like you have two date pickers for select the
start date and end date. Once you pick a start date, then you want to grey out
or disable all previous dates on the date picker for the end date field.so how
to achieve this thing.
Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="datevalidate.aspx.cs" Inherits="datevalidate" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#txtFromDate").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#txtTodate").datepicker("option", "minDate", dt);
}
});
$("#txtTodate").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#txtFromDate").datepicker("option", "maxDate", dt);
}
});
});
</script>
<title>Validate End Date Grater than to the
start dates</title>
</head>
<body>
<form id="form1" runat="server">
<table border="1">
<tr>
<td>From Date:
</td>
<td>
<input type="text" id="txtFromDate" />
</td>
<td>
</td>
<td>To Date:
</td>
<td>
<input type="text" id="txtTodate" />
</td>
</tr>
</table>
</form>
</body>
</html>
0 comments:
Post a Comment