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.