The following sample demonstrates a typical Date Range Selection scenario similar to selecting travel dates.
The sample uses the Basic Date Picker JavaScript API to do a client-side update of the EndDate's MinimumDate based on the StartDate.
A custom JavaScript function (updateEndDate()) is fired when OnClientAfterSelectionChanged
is fired. First we get the SelectedDate of StartDate, then add 7 days to the value
using the addDays() function.
Once the StartDate has been updated we use that value to set the SelectedDate [setSelectedDate()]
and MinimumDate [setMinimumDate()] of the EndDate.
The DateRangeValidator is used to ensure the StartDate is not in the past.
The DateDifferenceValidator is used to ensure the final EndDate submitted with the form is at least 7 days after StartDate.
On the Button Click Event, the StartDate and EndDate values are used to set Labels if the Page is valid.
<%@ Page Language="C#" %>
<%@ Register Assembly="BasicFrame.WebControls.BasicDatePicker" Namespace="BasicFrame.WebControls"
TagPrefix="BDP" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.bdpStartDate.SelectedDate = DateTime.Today;
this.bdpStartDate.MinimumDate = DateTime.Today;
this.bdpEndDate.SelectedDate = DateTime.Today.AddDays(7);
this.bdpEndDate.MinimumDate = DateTime.Today.AddDays(7);
}
this.DateRangeValidator1.MinimumDate = DateTime.Today;
}
protected void Button1_Click(object sender, EventArgs e)
{
if (this.Page.IsValid)
{
this.Label1.Text = "StartDate: " + this.bdpStartDate.SelectedDate.ToShortDateString();
this.Label2.Text = "EndDate: " + this.bdpEndDate.SelectedDate.ToShortDateString();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Update the MinimumDate of the EndDate based on the StartDate</title>
<script type="text/javascript">
function updateEndDate(sender)
{
var startDate = sender.getSelectedDate();
var newMinEndDate = startDate.addDays(7);
basicDatePicker.setMinimumDate(newMinEndDate,"bdpEndDate");
basicDatePicker.setSelectedDate(newMinEndDate,"bdpEndDate");
}
</script>
</head>
<body>
<h4>Example</h4>
<form id="form1" runat="server">
<div>
<p>Start Date<br />
<bdp:BasicDatePicker
id="bdpStartDate"
runat="server"
OnClientAfterSelectionChanged="updateEndDate"
/>
<BDP:DateRangeValidator
ID="DateRangeValidator1"
runat="server"
ControlToValidate="bdpStartDate"
Display="Dynamic"
ErrorMessage="The StartDate can not be in the past."
/></p>
<p>End Date<br />
<bdp:BasicDatePicker
id="bdpEndDate"
runat="server"
/>
<BDP:DateDifferenceValidator
ID="DateDifferenceValidator1"
runat="server"
ControlToCompare="bdpEndDate"
ControlToValidate="bdpStartDate"
Difference="7"
Display="Dynamic"
ErrorMessage="EndDate must be at least 7 days after StartDate"
Operator="GreaterThanEqual"
/>
<p> <asp:Button
ID="Button1"
runat="server"
Text="Submit"
OnClick="Button1_Click"
/>
</p>
<p> <asp:Label ID="Label1" runat="server" /><br />
<asp:Label ID="Label2" runat="server" /></p>
</div>
</form>
</body>
</html>
BasicDatePicker Class | MinimumDate | MaximumDate | OnClientAfterSelectionChanged