网站日历控件的使用

今天在做一个表单提交的时候用要用到日期的选择，所以发表了篇日历控件的使用的使用方法，希望对新手有所帮助。

1、首先从http://d.download.csdn.net/down/444922/dinggen下载日历控件

2、加载日历控件相关的代码

<link rel="stylesheet" type="text/css" media="all" href="{jscalendar/skins/aqua/theme.css" title="Aqua" />
<script type="text/javascript" src="{site_root}js/jscalendar/calendar.js"></script>
<script type="text/javascript" src="jscalendar/calendar-setup.js"></script>
<script type="text/javascript" src="jscalendar/lang/calendar-en.js"></script>

3、编写相关的JS代码：

<script language="javascript">
     var startDate;

//下面是控制单你选种一个时间时的操作，其中cal.sel.id == "sDate"是点击加载后，自动关闭空间的显示，其中"sDate"是文本框的ID

function selected(cal, date) {
       cal.sel.value = date;
       if (cal.dateClicked && (cal.sel.id == "sDate" || cal.sel.id == "eDate" || cal.sel.id == "eTime" || cal.sel.id == "lTime"))
      {
      if(cal.sel.id=="sDate")
      {
         startDate=date;
      }
      cal.callCloseHandler();
    }
}

function closeHandler(cal) {
     cal.hide();                      

     _dynarch_popupCalendar = null;
}

//这里是加载点击时的函数，主要就是这里

function showCalendar(id, format,setFun) {
    var el = document.getElementById(id);
    if (_dynarch_popupCalendar != null) {
  
     _dynarch_popupCalendar.hide();                 // so we hide it first.
   } else {
  
    var cal = new Calendar(1, null, selected, closeHandler);

    _dynarch_popupCalendar = cal;             
    cal.setRange(1900, 2070);      
 cal.setDisabledHandler(setFun);
    cal.create();
  }
  _dynarch_popupCalendar.setDateFormat(format);    // set the specified date format
  _dynarch_popupCalendar.parseDate(el.value);      // try to parse the text in field
  _dynarch_popupCalendar.sel = el;                 // inform it what input field we use

  _dynarch_popupCalendar.showAtElement(el.nextSibling, "Br");        // show the calendar

  return false;
}

var MINUTE = 60 * 1000;
var HOUR = 60 * MINUTE;
var DAY = 24 * HOUR;

function startSet(date) {
  var today = new Date();

  return (date.getTime() < (today.getTime()-DAY));
}

function endSet(date)
{
 
  var s=new Date(startDate).getTime();

  return (date.getTime()<(s+DAY));
 
}

function tourDateSelectChange(tab)
{
  if(tab=="fixed")
  {
    document.getElementById('fixed').style.display="";
 document.getElementById('flexible').style.display="none";
  }
  else
  {
      document.getElementById('fixed').style.display="none";
      document.getElementById('flexible').style.display="";
  }
}

</script>

4、在所要跳出日历控件的地方加上如下代码就可以了

例：<input name="sDate" type="text" id="sDate" value=""/><img src="../styles/images/calender.gif"  οnclick="return showCalendar('sDate', '%Y-%m-%d',startSet);"/>

注意上面的input和img中不能有任何空格或回车，不然会出错，上次我搞了好久才发现。

这样就可以了 希望对大家有帮助！