Web 弹出日历并传递时间

 

好在web控件集已经存在了Calendar控件，不足的地方在于：它占用了页面的空间，如果你要在三个Textbox中输入时间，直接使用Calendar实在很不方便。这时使用第二个窗体实为明智之选，点击某个链接，弹出第二个窗体，选择时间，转递这个时间到你所需要的Textbox中，然后关闭窗体。

我需要在TagActivate.aspx窗体的两个Textbox框中选择时间，它们分别命名为GetDateFrom,GetDateTo.

<A href="javascript:PopupPicker('GetDateFrom',200,200);"><IMG id="DateFrom" src="images/iconCalendar.gif" border="0" height="15"></A>

<A      href="javascript:PopupPicker('GetDateTo', 150, 150);">    <IMG id="DateTo" src="images/iconCalendar.gif" border="0" height="15"></A>

这里两个图标点击弹出相同窗体,但传递时间给不同的页面的control，看一下PopupPicker():

<script language="javascript">
<!--
function PopupPicker(ctl,w,h)
        {
            var PopupWindow=null;
            settings='width='+ w + ',height='+ h + ',top=250,left=200,location=no,directories=no,menubar=no,toolbar=no,status=no,scrollbars=no,resizable=no,dependent=no';
            PopupWindow=window.open('DatePicker.aspx?Ctl=' + ctl,'DatePicker',settings);
            PopupWindow.focus();
        }
//-->
            </script>

  我将日历控件放在DatePicker.aspx页面中，并填满此页面。
  将日历控件上的时间控件重写，使每一个时间都是一个超链接，然后点击超链接触发另外在DatePicker.aspx页面里的脚本。在dayrender清空时间并填充超链接。
  当然另外一种方法是在日期selectionchange时，触发事件，通过一个公共类来传递数据，这样也是可以的。
  我使用的是javascript的那种方法，当然脚本不是我写的，我修改了一下，并在dayrender()中重写了代码。
  

private void Calendar1_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
        {
            HyperLink hl=new HyperLink();
            hl.Text = e.Day.DayNumberText;

            if (e.Day.IsOtherMonth) 
              hl.ForeColor = Color.Black; 
           else
              hl.ForeColor = this.Calendar1.DayStyle.ForeColor;
           if (e.Day.IsToday) 
              hl.ForeColor = this.Calendar1.TodayDayStyle.ForeColor;
          hl.NavigateUrl = "javascript:SetDate('" + e.Day.Date.ToShortDateString()+ "');";
          e.Cell.Controls.Clear();
          e.Cell.Controls.Add(hl);        
        }

     这样，你点击了一个时间后，它就会触发这个SetDate()函数，这个函数通过ctl来传递事件时间。
 

<script language="javascript">
<!--
function SetDate(dateValue)
            {
                ctl = window.location.search.substr(5);
                thisForm = window.opener.document.forms[0].elements[ctl].value = dateValue;
                self.close();
            }
//-->
            </script>

   运行后得到了我们想要的结果！