<%@ Register TagPrefix="bdp" Namespace="BasicFrame.WebControls" Assembly="BasicFrame.WebControls.BasicDatePicker" %>
<%@ Page language="c#" Codebehind="Sample12.aspx.cs" AutoEventWireup="false" Inherits="BasicFrame.WebSamples.BasicDatePicker.CS.Sample12" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JavaScript API : Minimum/Maximum Viewable Date Sample</title>
<style>
.hint { color: #999 }
</style>
<script type="text/javascript">
var minimumDate, maximumDate;
function loadDateBounds(bdpParams)
{
// Get MinimumDate value from Basic Date Picker Params.
if(bdpParams.minimumDate != null)
minimumDate = new Date(bdpParams.minimumDate.getFullYear(), bdpParams.minimumDate.getMonth(), 1);
else
//Set a minimum date that the calender will never reach
minimumDate = new Date(1, 1, 1);
// Get MaximumDate value from Basic Date Picker Params.
if(bdpParams.maximumDate != null)
maximumDate = new Date(bdpParams.maximumDate.getFullYear(), bdpParams.maximumDate.getMonth(), 1);
else
//Set a maximum date that the calender will never reach
maximumDate = new Date(10000, 1, 1);
}
function beforeVisibleMonthChanged(sender, newVisibleDate)
{
// Fill the minimumDate & maximumDate dates variables.
loadDateBounds(sender.params);
//If the new visible month falls outside the range alert the user
if(newVisibleDate != minimumDate && newVisibleDate < minimumDate
|| newVisibleDate != maximumDate && newVisibleDate > maximumDate)
{
var msg = "Select a date";
if(sender.params.maximumDate == null)
alert(msg + " on or after: \n" + sender.formatDate(sender.params.minimumDate));
else if(sender.params.minimumDate == null)
alert(msg + " on or before: \n" + sender.formatDate(sender.params.maximumDate));
else
alert(msg + " between: \n" + sender.formatDate(sender.params.minimumDate) + " and " + sender.formatDate(sender.params.maximumDate));
return false;
}
}
function afterVisibleMonthChanged(sender)
{
// Fill the minimumDate & maximumDate dates variables.
loadDateBounds(sender.params);
var visibleDate = new Date(sender.viewingYear, sender.viewingMonth, 1);
//Find the [blue] header TR
var headerTR = sender.popUp.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild;
//If the visible month reaches the minimum date hide the prev. arrow
if(visibleDate.getMonth() == minimumDate.getMonth() && visibleDate.getFullYear() == minimumDate.getFullYear())
{
//Clear the timers so the calendar does not continue to scroll
sender.clearTimers();
//Hide the prev arrow
headerTR.firstChild.onclick = null;
headerTR.firstChild.firstChild.style.visibility = "hidden";
}
//If the visible month reaches the maximum date hide the next arrow
if(visibleDate.getMonth() == maximumDate.getMonth() && visibleDate.getFullYear() == maximumDate.getFullYear())
{
//Clear the timers so the calendar does not continue to scroll
sender.clearTimers();
//Hide the next arrow
headerTR.childNodes[2].onclick = null;
headerTR.childNodes[2].firstChild.style.visibility = "hidden";
}
}
</script>
</head>
<body>
<form id="form1" method="post" runat="server">
<h3>JavaScript API : Minimum/Maximum Viewable Date Sample</h3>
<p>Mimimum and Maximum date constraints:<BR>
<span class="hint">(Between one month in the past and one month in the future)</span></p>
<BDP:BasicDatePicker id="BasicDatePicker1" runat="server" OnClientBeforeVisibleMonthChanged="beforeVisibleMonthChanged"
OnClientAfterVisibleMonthChanged="afterVisibleMonthChanged"></BDP:BasicDatePicker>
<p>Mimimum date constraint:<BR>
<span class="hint">(Within the last month or greater)</span></p>
<BDP:BasicDatePicker id="BasicDatePicker2" runat="server" OnClientBeforeVisibleMonthChanged="beforeVisibleMonthChanged"
OnClientAfterVisibleMonthChanged="afterVisibleMonthChanged"></BDP:BasicDatePicker>
<p>Maximum date constraint:<BR>
<span class="hint">(No greater than one month from Today)</span></p>
<BDP:BasicDatePicker id="BasicDatePicker3" runat="server" OnClientBeforeVisibleMonthChanged="beforeVisibleMonthChanged"
OnClientAfterVisibleMonthChanged="afterVisibleMonthChanged"></BDP:BasicDatePicker>
</form>
</body>
</html>