Examples - Calendar - Date Range Use
The two textbox fields are linked have attached popupcalendar controls which are interlinked so that selecting a minimum date will limit the minimum date range in the popupcalendar attached to the maximum textbox and likewise the maximum date range for the popupcalendar attached to the maximum date textbox will limit the maximum date than can be selected for the popupcalendar linked to the minimum textbox.
Code:
<script type="text/javascript">
function calendarDateChange()
{
//get the popupcalendar minimum and maximum date controls
var calMin = $gc("pcMin");
var calMax = $gc("pcMax");
if(calMin && calMax)
{
//set the maximum and minimum dates accordingly
calMax.datemin = $g("txtDateMin").value; //limit minimum date to the value selected in the field txtDateMin
calMin.datemax = $g("txtDateMax").value; //limit maximum date to the value selected in the field txtDateMax
//call the render function to redraw the popupcalendar controls to reflect the new datemin and datemax values.
calMin.render();
calMax.render();
}
}
</script>
<!--Minimum Date-->
<input type="text" id="txtDateMin" style="float:left;" onChange="calendarDateChange();" datemax="2008/08/14"/>
<div id="pcMin" ext="popupcalendar" callid="txtDateMin" linkto="txtDateMin" style="width:170px;height:150px;display:none;">
</div>
<!--Maximum Date-->
<input type="text" id="txtDateMax" style="float:left;" onChange="calendarDateChange();" />
<div id="pcMax" ext="popupcalendar" callid="txtDateMax" linkto="txtDateMax" style="width:170px;height:150px;display:none;">
</div>
If you are interested in how the textbox parses a date then take a look
at the documentation on SS.datetime.