精华内容
下载资源
问答
  • 日期选择框

    2018-07-10 18:18:09
    js实现的日期选择框css代码/* The main calendar widget. DIV containing a table. */ div.calendar { position: relative; } .calendar{ font-size: 11px; color: #000; cursor: default; background: #eef; ...

    js实现的日期选择框

    css代码

    /* The main calendar widget.  DIV containing a table. */
    
    div.calendar { position: relative; }
    .calendar{
     font-size: 11px;
      color: #000;
      cursor: default;
      background: #eef;
      font-family: tahoma,verdana,sans-serif;
    
    }
    .calendar table {
      border:1px solid #000000;
      font-size: 11px;
      color: #000;
      cursor: default;
      background: #eef;
      font-family: tahoma,verdana,sans-serif;
    }
    
    /* Header part -- contains navigation buttons and day names. */
    
    .calendar .calendarButton { /* "<<", "<", ">", ">>" buttons have this class */
      text-align: center;    /* They are the navigation buttons */
      padding: 0px;          /* Make the buttons seem like they're pressing */
    }
    
    .calendar thead .title { /* This holds the current "month, year" */
      font-weight: bold;      /* Pressing it will take you to the current date */
      text-align: center;
      background: #fff;
      color: #000;
      padding: 0px;
    }
    
    .calendar thead .headrow { /* Row <TR> containing navigation buttons */
    
      background:#005EBB;
      color: #fff;
    }
    
    .calendar thead .daynames { /* Row <TR> containing the day names */
      background: #bdf;
    }
    
    .calendar thead .name { /* Cells <TD> containing the day names */
      border-bottom: 1px solid #556;
      padding: 0px;
      text-align: center;
      color: #000;
    }
    
    .calendar thead .weekend { /* How a weekend day name shows in header */
      color: #a66;
    }
    
    .calendar thead .hilite { /* How do the buttons in header appear when hover */
      background: #aaf;
      color: #000;
      border: 0px solid #04f;
      padding: 0px;
    }
    
    .calendar thead .active { /* Active (pressed) buttons in header */
      background: #77c;
      padding: 0px 0px 0px 0px;
    }
    
    /* The body part -- contains all the days in month. */
    
    .calendar tbody .day { /* Cells <TD> containing month days dates */
      width: 20px;
      color: #456;
      text-align: center;
      padding: 0px 0px 0px 0px;
    }
    
    .calendar table .wn {
      padding: 0px 0px 0px 0px;
      border-right: 1px solid #000;
      background: #bdf;
    }
    
    .calendar tbody .rowhilite td {
     
    }
    
    .calendar tbody .rowhilite td.wn {
      background: #eef;
    }
    
    .calendar tbody td.hilite { /* Hovered cells <TD> */
       
      color:#FFFFFF;
      background:#999999;
      padding: 0px 0px 0px 0px;
      border: 0px solid #bbb;
    }
    
    .calendar tbody td.active { /* Active (pressed) cells <TD> */
      background: #cde;
      padding: 0px 0px 0px 0px;
    }
    
    .calendar tbody td.selected { /* Cell showing today date */
      font-weight: bold;
      border: 1px solid #000;
      padding: 0px 0px 0px 0px;
      background: #fff;
      color: #000;
    }
    
    .calendar tbody td.weekend { /* Cells showing weekend days */
      color: #a66;
    }
    
    .calendar tbody td.today { /* Cell showing selected date */
      font-weight: bold;
      color: #00f;
    }
    
    .calendar tbody .disabled { color: #999; }
    
    .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
      visibility: hidden;
    }
    
    .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
      display: none;
    }
    
    /* The footer part -- status bar and "Close" button */
    
    .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
      text-align: center;
      background: #556;
      color: #fff;
    }
    
    .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
      background: #fff;
      color: #445;
      border-top: 1px solid #556;
      padding: 0px;
    }
    
    .calendar tfoot .hilite { /* Hover style for buttons in footer */
      background: #aaf;
      border: 0px solid #04f;
      color: #000;
      padding: 0px;
    }
    
    .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
      background: #77c;
      padding: 0px 0px 0px 0px;
    }
    
    /* Combo boxes (menus that display months/years for direct selection) */
    
    .combo {
      position: absolute;
      display: none;
      top: 0px;
      left: 0px;
      width: 4em;
      cursor: default;
      border: 1px solid #655;
      background: #def;
      color: #000;
      font-size: smaller;
    }
    
    .combo .label {
      width: 100%;
      text-align: center;
    }
    
    .combo .hilite {
      background: #acf;
    }
    
    .combo .active {
      border-top: 1px solid #46a;
      border-bottom: 1px solid #46a;
      background: #eef;
      font-weight: bold;
    }
    
    .pclass{ font-size: 14px; color: #000000;}
    .tableclass TD{ font-size: 14px;TEXT-DECORATION: none;  color: #000000;line-height:140%;}
    .tableclass TD a{font-size: 14px;TEXT-DECORATION: none;  color: #003399;line-height:140%;}
    .bodyclass body{  font-family: "宋体"; font-size: 12px; font-style: normal}
    .bodyclass button {FONT-FAMILY: "宋体"; FONT-SIZE: 12px; HEIGHT: 18px; WIDTH: 45px;color: 000000 ;}
    .bodyclass form {FONT-FAMILY: "宋体"; FONT-SIZE: 9pt; HEIGHT: 18px; color: 000000 ;}
                              

    js代码

    /*  Copyright Mihai Bazon, 2002  |  http://students.infoiasi.ro/~mishoo
     * ---------------------------------------------------------------------
     *
     * The DHTML Calendar, version 0.9.2 "The art of date selection"
     *
     * Details and latest version at:
     * http://students.infoiasi.ro/~mishoo/site/calendar.epl
     *
     * Feel free to use this script under the terms of the GNU Lesser General
     * Public License, as long as you do not remove or alter this notice.
     */
    
    // $Id: calendar_cn.js,v 1.1 2006/05/15 06:28:29 cww Exp $
    
    /** The Calendar object constructor. */
    Calendar = function (mondayFirst, dateStr, onSelected, onClose) {
    	// member variables
    	this.activeDiv = null;
    	this.currentDateEl = null;
    	this.checkDisabled = null;
    	this.timeout = null;
    	this.onSelected = onSelected || null;
    	this.onClose = onClose || null;
    	this.dragging = false;
    	this.hidden = false;
    	this.minYear = 1970;
    	this.maxYear = 2050;
    	this.dateFormat = Calendar._TT["DEF_DATE_FORMAT"];
    	this.ttDateFormat = Calendar._TT["TT_DATE_FORMAT"];
    	this.isPopup = true;
    	this.weekNumbers = false;
    	this.mondayFirst = mondayFirst;
    	this.dateStr = dateStr;
    	this.ar_days = null;
    	// HTML elements
    	this.table = null;
    	this.element = null;
    	this.tbody = null;
    	this.firstdayname = null;
    	// Combo boxes
    	this.monthsCombo = null;
    	this.yearsCombo = null;
    	this.hilitedMonth = null;
    	this.activeMonth = null;
    	this.hilitedYear = null;
    	this.activeYear = null;
    
    	// one-time initializations
    	if (!Calendar._DN3) {
    		// table of short day names
    		var ar = new Array();
    		for (var i = 8; i > 0;) {
    			ar[--i] = Calendar._DN[i].substr(0, 3);
    		}
    		Calendar._DN3 = ar;
    		// table of short month names
    		ar = new Array();
    		for (var i = 12; i > 0;) {
    			ar[--i] = Calendar._MN[i].substr(0, 3);
    		}
    		Calendar._MN3 = ar;
    	}
    };
    
    // ** constants
    
    /// "static", needed for event handlers.
    Calendar._C = null;
    
    /// detect a special case of "web browser"
    Calendar.is_ie = ( (navigator.userAgent.toLowerCase().indexOf("msie") != -1) &&
    		   (navigator.userAgent.toLowerCase().indexOf("opera") == -1) );
    
    // short day names array (initialized at first constructor call)
    Calendar._DN3 = null;
    
    // short month names array (initialized at first constructor call)
    Calendar._MN3 = null;
    
    // BEGIN: UTILITY FUNCTIONS; beware that these might be moved into a separate
    //        library, at some point.
    
    Calendar.getAbsolutePos = function(el) {
    	var r = { x: el.offsetLeft, y: el.offsetTop };
    	//var b = null;
    
    	if (el.offsetParent) {
    		//b = el.offsetParent;
    		//alert(el.offsetParent.tagName);
    		//alert(r.x+":"+r.y );//+"---"+l.x +":"+l.y);
    		var tmp = Calendar.getAbsolutePos(el.offsetParent);
    		r.x += tmp.x;
    		r.y += tmp.y;
    		
    	}
    	//r.b = ;
    	   
    	return r;
    };
    
    
    //var l = { x: el.offsetWidth, y: el.offsetHeight };
    	//alert(screen.width);
    //	if(l.x<160 ){
    //		alert(l.x);
    //	r.x -= 160 +l.x;	
    		
    //		}
    	
    
    Calendar.isRelated = function (el, evt) {
    	var related = evt.relatedTarget;
    	if (!related) {
    		var type = evt.type;
    		if (type == "mouseover") {
    			related = evt.fromElement;
    		} else if (type == "mouseout") {
    			related = evt.toElement;
    		}
    	}
    	while (related) {
    		if (related == el) {
    			return true;
    		}
    		related = related.parentNode;
    	}
    	return false;
    };
    
    Calendar.removeClass = function(el, className) {
    	if (!(el && el.className)) {
    		return;
    	}
    	var cls = el.className.split(" ");
    	var ar = new Array();
    	for (var i = cls.length; i > 0;) {
    		if (cls[--i] != className) {
    			ar[ar.length] = cls[i];
    		}
    	}
    	el.className = ar.join(" ");
    };
    
    Calendar.addClass = function(el, className) {
    	Calendar.removeClass(el, className);
    	el.className += " " + className;
    };
    
    Calendar.getElement = function(ev) {
    	if (Calendar.is_ie) {
    		return window.event.srcElement;
    	} else {
    		return ev.currentTarget;
    	}
    };
    
    Calendar.getTargetElement = function(ev) {
    	if (Calendar.is_ie) {
    		return window.event.srcElement;
    	} else {
    		return ev.target;
    	}
    };
    
    Calendar.stopEvent = function(ev) {
    	if (Calendar.is_ie) {
    		window.event.cancelBubble = true;
    		window.event.returnValue = false;
    	} else {
    		ev.preventDefault();
    		ev.stopPropagation();
    	}
    };
    
    Calendar.addEvent = function(el, evname, func) {
    	if (Calendar.is_ie) {
    		el.attachEvent("on" + evname, func);
    	} else {
    		el.addEventListener(evname, func, true);
    	}
    };
    
    Calendar.removeEvent = function(el, evname, func) {
    	if (Calendar.is_ie) {
    		el.detachEvent("on" + evname, func);
    	} else {
    		el.removeEventListener(evname, func, true);
    	}
    };
    
    Calendar.createElement = function(type, parent) {
    	var el = null;
    	if (document.createElementNS) {
    		// use the XHTML namespace; IE won't normally get here unless
    		// _they_ "fix" the DOM2 implementation.
    		el = document.createElementNS("http://www.w3.org/1999/xhtml", type);
    	} else {
    		el = document.createElement(type);
    	}
    	if (typeof parent != "undefined") {
    		parent.appendChild(el);
    	}
    	return el;
    };
    
    // END: UTILITY FUNCTIONS
    
    // BEGIN: CALENDAR STATIC FUNCTIONS
    
    /** Internal -- adds a set of events to make some element behave like a button. */
    Calendar._add_evs = function(el) {
    	with (Calendar) {
    		addEvent(el, "mouseover", dayMouseOver);
    		addEvent(el, "mousedown", dayMouseDown);
    		addEvent(el, "mouseout", dayMouseOut);
    		if (is_ie) {
    			addEvent(el, "dblclick", dayMouseDblClick);
    			el.setAttribute("unselectable", true);
    		}
    	}
    };
    
    Calendar.findMonth = function(el) {
    	if (typeof el.month != "undefined") {
    		return el;
    	} else if (typeof el.parentNode.month != "undefined") {
    		return el.parentNode;
    	}
    	return null;
    };
    
    Calendar.findYear = function(el) {
    	if (typeof el.year != "undefined") {
    		return el;
    	} else if (typeof el.parentNode.year != "undefined") {
    		return el.parentNode;
    	}
    	return null;
    };
    Calendar.showMonthsCombo = function () {
    	var cal = Calendar._C;
    	if (!cal) {
    		return false;
    	}
    	var cal = cal;
    	var cd = cal.activeDiv;
    	var mc = cal.monthsCombo;
    	if (cal.hilitedMonth) {
    		Calendar.removeClass(cal.hilitedMonth, "hilite");
    	}
    	if (cal.activeMonth) {
    		Calendar.removeClass(cal.activeMonth, "active");
    	}
    	var mon = cal.monthsCombo.getElementsByTagName("div")[cal.date.getMonth()];
    	Calendar.addClass(mon, "active");
    	cal.activeMonth = mon;
    	mc.style.left = cd.offsetLeft + "px";
    	mc.style.top = (cd.offsetTop + cd.offsetHeight) + "px";
    	mc.style.display = "block";
    };
    
    Calendar.prototype.showMonthsCombo = function () {
    	var cal = Calendar._C;
    	if (!cal) {
    		return false;
    	}
    	var cal = cal;
    	var cd = cal.activeDiv;
    	var mc = cal.monthsCombo;
    	if (cal.hilitedMonth) {
    		Calendar.removeClass(cal.hilitedMonth, "hilite");
    	}
    	if (cal.activeMonth) {
    		Calendar.removeClass(cal.activeMonth, "active");
    	}
    	var mon = cal.monthsCombo.getElementsByTagName("div")[cal.date.getMonth()];
    	Calendar.addClass(mon, "active");
    	cal.activeMonth = mon;
    	mc.style.left = cd.offsetLeft + "px";
    	mc.style.top = (cd.offsetTop + cd.offsetHeight) + "px";
    	mc.style.display = "block";
    };
    
    Calendar.showYearsCombo = function (fwd) {
    	var cal = Calendar._C;
    	if (!cal) {
    		return false;
    	}
    	var cal = cal;
    	var cd = cal.activeDiv;
    	var yc = cal.yearsCombo;
    	if (cal.hilitedYear) {
    		Calendar.removeClass(cal.hilitedYear, "hilite");
    	}
    	if (cal.activeYear) {
    		Calendar.removeClass(cal.activeYear, "active");
    	}
    	cal.activeYear = null;
    	var Y = cal.date.getFullYear() + (fwd ? 1 : -1);
    	var yr = yc.firstChild;
    	var show = false;
    	for (var i = 12; i > 0; --i) {
    		if (Y >= cal.minYear && Y <= cal.maxYear) {
    			yr.firstChild.data = Y;
    			yr.year = Y;
    			yr.style.display = "block";
    			show = true;
    		} else {
    			yr.style.display = "none";
    		}
    		yr = yr.nextSibling;
    		Y += fwd ? 2 : -2;
    	}
    	if (show) {
    		yc.style.left = cd.offsetLeft + "px";
    		yc.style.top = (cd.offsetTop + cd.offsetHeight) + "px";
    		yc.style.display = "block";
    	}
    };
    
    // event handlers
    
    Calendar.tableMouseUp = function(ev) {
    	var cal = Calendar._C;
    	if (!cal) {
    		return false;
    	}
    	if (cal.timeout) {
    		clearTimeout(cal.timeout);
    	}
    	var el = cal.activeDiv;
    	if (!el) {
    		return false;
    	}
    	var target = Calendar.getTargetElement(ev);
    	Calendar.removeClass(el, "active");
    	if (target == el || target.parentNode == el) {
    		Calendar.cellClick(el);
    	}
    	var mon = Calendar.findMonth(target);
    	var date = null;
    	if (mon) {
    		date = new Date(cal.date);
    		if (mon.month != date.getMonth()) {
    			date.setMonth(mon.month);
    			cal.setDate(date);
    		}
    	} else {
    		var year = Calendar.findYear(target);
    		if (year) {
    			date = new Date(cal.date);
    			if (year.year != date.getFullYear()) {
    				date.setFullYear(year.year);
    				cal.setDate(date);
    			}
    		}
    	}
    	with (Calendar) {
    		removeEvent(document, "mouseup", tableMouseUp);
    		removeEvent(document, "mouseover", tableMouseOver);
    		removeEvent(document, "mousemove", tableMouseOver);
    		cal._hideCombos();
    		stopEvent(ev);
    		_C = null;
    	}
    };
    
    Calendar.tableMouseOver = function (ev) {
    	var cal = Calendar._C;
    	if (!cal) {
    		return;
    	}
    	var el = cal.activeDiv;
    	var target = Calendar.getTargetElement(ev);
    	if (target == el || target.parentNode == el) {
    		Calendar.addClass(el, "hilite active");
    		Calendar.addClass(el.parentNode, "rowhilite");
    	} else {
    		Calendar.removeClass(el, "active");
    		Calendar.removeClass(el, "hilite");
    		Calendar.removeClass(el.parentNode, "rowhilite");
    	}
    	var mon = Calendar.findMonth(target);
    	if (mon) {
    		if (mon.month != cal.date.getMonth()) {
    			if (cal.hilitedMonth) {
    				Calendar.removeClass(cal.hilitedMonth, "hilite");
    			}
    			Calendar.addClass(mon, "hilite");
    			cal.hilitedMonth = mon;
    		} else if (cal.hilitedMonth) {
    			Calendar.removeClass(cal.hilitedMonth, "hilite");
    		}
    	} else {
    		var year = Calendar.findYear(target);
    		if (year) {
    			if (year.year != cal.date.getFullYear()) {
    				if (cal.hilitedYear) {
    					Calendar.removeClass(cal.hilitedYear, "hilite");
    				}
    				Calendar.addClass(year, "hilite");
    				cal.hilitedYear = year;
    			} else if (cal.hilitedYear) {
    				Calendar.removeClass(cal.hilitedYear, "hilite");
    			}
    		}
    	}
    	Calendar.stopEvent(ev);
    };
    
    Calendar.tableMouseDown = function (ev) {
    	if (Calendar.getTargetElement(ev) == Calendar.getElement(ev)) {
    		Calendar.stopEvent(ev);
    	}
    };
    
    Calendar.calDragIt = function (ev) {
    	var cal = Calendar._C;
    	if (!(cal && cal.dragging)) {
    		return false;
    	}
    	var posX;
    	var posY;
    	if (Calendar.is_ie) {
    		posY = window.event.clientY + document.body.scrollTop;
    		posX = window.event.clientX + document.body.scrollLeft;
    	} else {
    		posX = ev.pageX;
    		posY = ev.pageY;
    	}
    	cal.hideShowCovered();
    	var st = cal.element.style;
    	st.left = (posX - cal.xOffs) + "px";
    	st.top = (posY - cal.yOffs) + "px";
    	Calendar.stopEvent(ev);
    };
    
    Calendar.calDragEnd = function (ev) {
    	var cal = Calendar._C;
    	if (!cal) {
    		return false;
    	}
    	cal.dragging = false;
    	with (Calendar) {
    		removeEvent(document, "mousemove", calDragIt);
    		removeEvent(document, "mouseover", stopEvent);
    		removeEvent(document, "mouseup", calDragEnd);
    		tableMouseUp(ev);
    	}
    	cal.hideShowCovered();
    };
    
    Calendar.dayMouseDown = function(ev) {
    	var el = Calendar.getElement(ev);
    	if (el.disabled) {
    		return false;
    	}
    	var cal = el.calendar;
    	cal.activeDiv = el;
    	Calendar._C = cal;
    	if (el.navtype != 300) with (Calendar) {
    		addClass(el, "hilite active");
    		addEvent(document, "mouseover", tableMouseOver);
    		addEvent(document, "mousemove", tableMouseOver);
    		addEvent(document, "mouseup", tableMouseUp);
    	} else if (cal.isPopup) {
    		cal._dragStart(ev);
    	}
    	Calendar.stopEvent(ev);
    	if (el.navtype == -1 || el.navtype == 1) {
    		cal.timeout = setTimeout("Calendar.showMonthsCombo()", 250);
    	} else if (el.navtype == -2 || el.navtype == 2) {
    		cal.timeout = setTimeout((el.navtype > 0) ? "Calendar.showYearsCombo(true)" : "Calendar.showYearsCombo(false)", 250);
    	} else {
    		cal.timeout = null;
    	}
    };
    
    Calendar.dayMouseDblClick = function(ev) {
    	Calendar.cellClick(Calendar.getElement(ev));
    	if (Calendar.is_ie) {
    		document.activeElement.value = '';/*document.selection.empty();陆荣修改,更改双击时提示错误*/
    	}
    };
    
    Calendar.dayMouseOver = function(ev) {
    	var el = Calendar.getElement(ev);
    	if (Calendar.isRelated(el, ev) || Calendar._C || el.disabled) {
    		return false;
    	}
    	if (el.ttip) {
    		if (el.ttip.substr(0, 1) == "_") {
    			var date = null;
    			with (el.calendar.date) {
    				date = new Date(getFullYear(), getMonth(), el.caldate);
    			}
    			el.ttip = date.print(el.calendar.ttDateFormat) + el.ttip.substr(1);
    		}
    		el.calendar.tooltips.firstChild.data = el.ttip;
    	}
    	if (el.navtype != 300) {
    		Calendar.addClass(el, "hilite");
    		if (el.caldate) {
    			Calendar.addClass(el.parentNode, "rowhilite");
    		}
    	}
    	Calendar.stopEvent(ev);
    };
    
    Calendar.dayMouseOut = function(ev) {
    	with (Calendar) {
    		var el = getElement(ev);
    		if (isRelated(el, ev) || _C || el.disabled) {
    			return false;
    		}
    		removeClass(el, "hilite");
    		if (el.caldate) {
    			removeClass(el.parentNode, "rowhilite");
    		}
    		el.calendar.tooltips.firstChild.data = _TT["SEL_DATE"];
    		stopEvent(ev);
    	}
    };
    
    /**
     *  A generic "click" handler :) handles all types of buttons defined in this
     *  calendar.
     */
    Calendar.cellClick = function(el) 
    {
    	var cal = el.calendar;
    	var closing = false;
    	var newdate = false;
    	var date = null;
    		
    	if (typeof el.navtype == "undefined") 
    	{
    		Calendar.removeClass(cal.currentDateEl, "selected");
    		Calendar.addClass(el, "selected");
    		closing = (cal.currentDateEl == el);
    		if (!closing) 
    		{
    			cal.currentDateEl = el;
    		}
    		cal.date.setDate(el.caldate);
    		date = cal.date;
    		newdate = true;
    		cal.callHandler();
    		cal.callCloseHandler();
    		return;
    	} 
    	else 
    	{	
    		if (el.navtype == 200) 
    		{
    			Calendar.removeClass(el, "hilite");
    			cal.callCloseHandler();
    			return;
    		}
    		date = (el.navtype == 0) ? new Date() : new Date(cal.date);
    		var year = date.getFullYear();
    		var mon = date.getMonth();
    		function setMonth(m) 
    		{
    			var day = date.getDate();
    			var max = date.getMonthDays(m);
    			if (day > max) 
    			{
    				date.setDate(max);
    			}
    			date.setMonth(m);
    		};
    		switch (el.navtype) 
    		{
    		    case -2:
    			if (year > cal.minYear) 
    			{
    				date.setFullYear(year - 1);
    			}
    			break;
    		    case -1:
    			if (mon > 0) 
    			{
    				setMonth(mon - 1);
    			}
    			else if (year-- > cal.minYear) 
    			{
    				date.setFullYear(year);
    				setMonth(11);
    			}
    			break;
    		    case 1:
    			if (mon < 11) 
    			{
    				setMonth(mon + 1);
    			}
    			else if (year < cal.maxYear) 
    			{
    				date.setFullYear(year + 1);
    				setMonth(0);
    			}
    			break;
    		    case 2:
    			if (year < cal.maxYear) 
    			{
    				date.setFullYear(year + 1);
    			}
    			break;
    		    case 100:
    			cal.setMondayFirst(!cal.mondayFirst);
    			return;
    		}
    		if (!date.equalsTo(cal.date)) 
    		{
    			cal.setDate(date);
    			newdate = el.navtype == 0;
    		}
    	}
    	if (newdate) {
    		cal.callHandler();
    	}
    	if (closing) 
    	{
    		Calendar.removeClass(el, "hilite");
    		cal.callCloseHandler();
    	}
    };
    
    // END: CALENDAR STATIC FUNCTIONS
    
    // BEGIN: CALENDAR OBJECT FUNCTIONS
    
    /**
     *  This function creates the calendar inside the given parent.  If _par is
     *  null than it creates a popup calendar inside the BODY element.  If _par is
     *  an element, be it BODY, then it creates a non-popup calendar (still
     *  hidden).  Some properties need to be set before calling this function.
     */
    Calendar.prototype.create = function (_par) {
    	var parent = null;
    	if (! _par) {
    		// default parent is the document body, in which case we create
    		// a popup calendar.
    		parent = document.getElementsByTagName("body")[0];
    		this.isPopup = true;
    	} else {
    		parent = _par;
    		this.isPopup = false;
    	}
    	this.date = this.dateStr ? new Date(this.dateStr) : new Date();
    
    	var table = Calendar.createElement("table");
    	this.table = table;
    	table.cellSpacing = 0;
    	table.cellPadding = 0;
    	table.calendar = this;
    	Calendar.addEvent(table, "mousedown", Calendar.tableMouseDown);
    
    	var div = Calendar.createElement("div");
    	this.element = div;
    	div.className = "calendar";
    	if (this.isPopup) {
    		div.style.position = "absolute";
    		div.style.display = "none";
    	}
    	div.appendChild(table);
    
    	var thead = Calendar.createElement("thead", table);
    	var cell = null;
    	var row = null;
    
    	var cal = this;
    	var hh = function (text, cs, navtype) {
    		cell = Calendar.createElement("td", row);
    		cell.colSpan = cs;
    		cell.className = "calendarButton";
    		Calendar._add_evs(cell);
    		cell.calendar = cal;
    		cell.navtype = navtype;
    		if (text.substr(0, 1) != "&") {
    			cell.appendChild(document.createTextNode(text));
    		}
    		else {
    			// FIXME: dirty hack for entities
    			cell.innerHTML = text;
    		}
    		return cell;
    	};
    
    	row = Calendar.createElement("tr", thead);
    	var title_length = 6;
    	(this.isPopup) && --title_length;
    	(this.weekNumbers) && ++title_length;
    
    	hh("-", 1, 100).ttip = Calendar._TT["TOGGLE"];
    	this.title = hh("", title_length, 300);
    	this.title.className = "title";
    	if (this.isPopup) {
    		this.title.ttip = Calendar._TT["DRAG_TO_MOVE"];
    		this.title.style.cursor = "move";
    		hh("×", 1, 200).ttip = Calendar._TT["CLOSE"];
    	}
    
    	row = Calendar.createElement("tr", thead);
    	row.className = "headrow";
    
    	this._nav_py = hh("«", 1, -2);
    	this._nav_py.ttip = Calendar._TT["PREV_YEAR"];
    
    	this._nav_pm = hh("‹", 1, -1);
    	this._nav_pm.ttip = Calendar._TT["PREV_MONTH"];
    
    	this._nav_now = hh(Calendar._TT["TODAY"], this.weekNumbers ? 4 : 3, 0);
    	this._nav_now.ttip = Calendar._TT["GO_TODAY"];
    
    	this._nav_nm = hh("›", 1, 1);
    	this._nav_nm.ttip = Calendar._TT["NEXT_MONTH"];
    
    	this._nav_ny = hh("»", 1, 2);
    	this._nav_ny.ttip = Calendar._TT["NEXT_YEAR"]
    
    	// day names
    	row = Calendar.createElement("tr", thead);
    	row.className = "daynames";
    	if (this.weekNumbers) {
    		cell = Calendar.createElement("td", row);
    		cell.className = "name wn";
    		cell.appendChild(document.createTextNode(Calendar._TT["WK"]));
    	}
    	for (var i = 7; i > 0; --i) {
    		cell = Calendar.createElement("td", row);
    		cell.appendChild(document.createTextNode(""));
    		if (!i) {
    			cell.navtype = 100;
    			cell.calendar = this;
    			Calendar._add_evs(cell);
    		}
    	}
    	this.firstdayname = (this.weekNumbers) ? row.firstChild.nextSibling : row.firstChild;
    	this._displayWeekdays();
    
    	var tbody = Calendar.createElement("tbody", table);
    	this.tbody = tbody;
    
    	for (i = 6; i > 0; --i) {
    		row = Calendar.createElement("tr", tbody);
    		if (this.weekNumbers) {
    			cell = Calendar.createElement("td", row);
    			cell.appendChild(document.createTextNode(""));
    		}
    		for (var j = 7; j > 0; --j) {
    			cell = Calendar.createElement("td", row);
    			cell.appendChild(document.createTextNode(""));
    			cell.calendar = this;
    			Calendar._add_evs(cell);
    		}
    	}
    
    	var tfoot = Calendar.createElement("tfoot", table);
    
    	row = Calendar.createElement("tr", tfoot);
    	row.className = "footrow";
    
    	cell = hh(Calendar._TT["SEL_DATE"], this.weekNumbers ? 8 : 7, 300);
    	cell.className = "ttip";
    	if (this.isPopup) {
    		cell.ttip = Calendar._TT["DRAG_TO_MOVE"];
    		cell.style.cursor = "move";
    	}
    	this.tooltips = cell;
    
    	div = Calendar.createElement("div", this.element);
    	this.monthsCombo = div;
    	div.className = "combo";
    	for (i = 0; i < Calendar._MN.length; ++i) {
    		var mn = Calendar.createElement("div");
    		mn.className = "label";
    		mn.month = i;
    		mn.appendChild(document.createTextNode(Calendar._MN3[i]));
    		div.appendChild(mn);
    	}
    
    	div = Calendar.createElement("div", this.element);
    	this.yearsCombo = div;
    	div.className = "combo";
    	for (i = 12; i > 0; --i) {
    		var yr = Calendar.createElement("div");
    		yr.className = "label";
    		yr.appendChild(document.createTextNode(""));
    		div.appendChild(yr);
    	}
    
    	this._init(this.mondayFirst, this.date);
    	parent.appendChild(this.element);
    };
    
    /** keyboard navigation, only for popup calendars */
    Calendar._keyEvent = function(ev) {
    	if (!window.calendar) {
    		return false;
    	}
    	(Calendar.is_ie) && (ev = window.event);
    	var cal = window.calendar;
    	var act = (Calendar.is_ie || ev.type == "keypress");
    	if (ev.ctrlKey) {
    		switch (ev.keyCode) {
    		    case 37: // KEY left
    			act && Calendar.cellClick(cal._nav_pm);
    			break;
    		    case 38: // KEY up
    			act && Calendar.cellClick(cal._nav_py);
    			break;
    		    case 39: // KEY right
    			act && Calendar.cellClick(cal._nav_nm);
    			break;
    		    case 40: // KEY down
    			act && Calendar.cellClick(cal._nav_ny);
    			break;
    		    default:
    			return false;
    		}
    	} else switch (ev.keyCode) {
    	    case 32: // KEY space (now)
    		Calendar.cellClick(cal._nav_now);
    		break;
    	    case 27: // KEY esc
    		act && cal.hide();
    		break;
    	    case 37: // KEY left
    	    case 38: // KEY up
    	    case 39: // KEY right
    	    case 40: // KEY down
    		if (act) {
    			var date = cal.date.getDate() - 1;
    			var el = cal.currentDateEl;
    			var ne = null;
    			var prev = (ev.keyCode == 37) || (ev.keyCode == 38);
    			switch (ev.keyCode) {
    			    case 37: // KEY left
    				(--date >= 0) && (ne = cal.ar_days[date]);
    				break;
    			    case 38: // KEY up
    				date -= 7;
    				(date >= 0) && (ne = cal.ar_days[date]);
    				break;
    			    case 39: // KEY right
    				(++date < cal.ar_days.length) && (ne = cal.ar_days[date]);
    				break;
    			    case 40: // KEY down
    				date += 7;
    				(date < cal.ar_days.length) && (ne = cal.ar_days[date]);
    				break;
    			}
    			if (!ne) {
    				if (prev) {
    					Calendar.cellClick(cal._nav_pm);
    				} else {
    					Calendar.cellClick(cal._nav_nm);
    				}
    				date = (prev) ? cal.date.getMonthDays() : 1;
    				el = cal.currentDateEl;
    				ne = cal.ar_days[date - 1];
    			}
    			Calendar.removeClass(el, "selected");
    			Calendar.addClass(ne, "selected");
    			cal.date.setDate(ne.caldate);
    			cal.currentDateEl = ne;
    		}
    		break;
    	    case 13: // KEY enter
    		if (act) {
    			cal.callHandler();
    			cal.hide();
    		}
    		break;
    	    default:
    		return false;
    	}
    	Calendar.stopEvent(ev);
    };
    
    /**
     *  (RE)Initializes the calendar to the given date and style (if mondayFirst is
     *  true it makes Monday the first day of week, otherwise the weeks start on
     *  Sunday.
     */
    Calendar.prototype._init = function (mondayFirst, date) {
    	var today = new Date();
    	var year = date.getFullYear();
    	if (year < this.minYear) {
    		year = this.minYear;
    		date.setFullYear(year);
    	} else if (year > this.maxYear) {
    		year = this.maxYear;
    		date.setFullYear(year);
    	}
    	this.mondayFirst = mondayFirst;
    	this.date = new Date(date);
    	var month = date.getMonth();
    	var mday = date.getDate();
    	var no_days = date.getMonthDays();
    	date.setDate(1);
    	var wday = date.getDay();
    	var MON = mondayFirst ? 1 : 0;
    	var SAT = mondayFirst ? 5 : 6;
    	var SUN = mondayFirst ? 6 : 0;
    	if (mondayFirst) {
    		wday = (wday > 0) ? (wday - 1) : 6;
    	}
    	var iday = 1;
    	var row = this.tbody.firstChild;
    	var MN = Calendar._MN3[month];
    	var hasToday = ((today.getFullYear() == year) && (today.getMonth() == month));
    	var todayDate = today.getDate();
    	var week_number = date.getWeekNumber();
    	var ar_days = new Array();
    	for (var i = 0; i < 6; ++i) {
    		if (iday > no_days) {
    			row.className = "emptyrow";
    			row = row.nextSibling;
    			continue;
    		}
    		var cell = row.firstChild;
    		if (this.weekNumbers) {
    			cell.className = "day wn";
    			cell.firstChild.data = week_number;
    			cell = cell.nextSibling;
    		}
    		++week_number;
    		row.className = "daysrow";
    		for (var j = 0; j < 7; ++j) {
    			cell.className = "day";
    			if ((!i && j < wday) || iday > no_days) {
    				// cell.className = "emptycell";
    				cell.innerHTML = " ";
    				cell.disabled = true;
    				cell = cell.nextSibling;
    				continue;
    			}
    			cell.disabled = false;
    			cell.firstChild.data = iday;
    			if (typeof this.checkDisabled == "function") {
    				date.setDate(iday);
    				if (this.checkDisabled(date)) {
    					cell.className += " disabled";
    					cell.disabled = true;
    				}
    			}
    			if (!cell.disabled) {
    				ar_days[ar_days.length] = cell;
    				cell.caldate = iday;
    				cell.ttip = "_";
    				if (iday == mday) {
    					cell.className += " selected";
    					this.currentDateEl = cell;
    				}
    				if (hasToday && (iday == todayDate)) {
    					cell.className += " today";
    					cell.ttip += Calendar._TT["PART_TODAY"];
    				}
    				if (wday == SAT || wday == SUN) {
    					cell.className += " weekend";
    				}
    			}
    			++iday;
    			((++wday) ^ 7) || (wday = 0);
    			cell = cell.nextSibling;
    		}
    		row = row.nextSibling;
    	}
    	this.ar_days = ar_days;
    	this.title.firstChild.data = Calendar._MN[month] + ", " + year;
    	// PROFILE
    	// this.tooltips.firstChild.data = "Generated in " + ((new Date()) - today) + " ms";
    };
    
    /**
     *  Calls _init function above for going to a certain date (but only if the
     *  date is different than the currently selected one).
     */
    Calendar.prototype.setDate = function (date) {
    	if (!date.equalsTo(this.date)) {
    		this._init(this.mondayFirst, date);
    	}
    };
    
    /** Modifies the "mondayFirst" parameter (EU/US style). */
    Calendar.prototype.setMondayFirst = function (mondayFirst) {
    	this._init(mondayFirst, this.date);
    	this._displayWeekdays();
    };
    
    /**
     *  Allows customization of what dates are enabled.  The "unaryFunction"
     *  parameter must be a function object that receives the date (as a JS Date
     *  object) and returns a boolean value.  If the returned value is true then
     *  the passed date will be marked as disabled.
     */
    Calendar.prototype.setDisabledHandler = function (unaryFunction) {
    	this.checkDisabled = unaryFunction;
    };
    
    /** Customization of allowed year range for the calendar. */
    Calendar.prototype.setRange = function (a, z) {
    	this.minYear = a;
    	this.maxYear = z;
    };
    
    /** Calls the first user handler (selectedHandler). */
    Calendar.prototype.callHandler = function () {
    	if (this.onSelected) {
    		this.onSelected(this, this.date.print(this.dateFormat));
    	}
    };
    
    /** Calls the second user handler (closeHandler). */
    Calendar.prototype.callCloseHandler = function () {
    	if (this.onClose) {
    		this.onClose(this);
    	}
    	this.hideShowCovered();
    };
    
    /** Removes the calendar object from the DOM tree and destroys it. */
    Calendar.prototype.destroy = function () {
    	var el = this.element.parentNode;
    	el.removeChild(this.element);
    	Calendar._C = null;
    	delete el;
    };
    
    /**
     *  Moves the calendar element to a different section in the DOM tree (changes
     *  its parent).
     */
    Calendar.prototype.reparent = function (new_parent) {
    	var el = this.element;
    	el.parentNode.removeChild(el);
    	new_parent.appendChild(el);
    };
    
    // This gets called when the user presses a mouse button anywhere in the
    // document, if the calendar is shown.  If the click was outside the open
    // calendar this function closes it.
    Calendar._checkCalendar = function(ev) {
    	if (!window.calendar) {
    		return false;
    	}
    	var el = Calendar.is_ie ? Calendar.getElement(ev) : Calendar.getTargetElement(ev);
    	for (; el != null && el != calendar.element; el = el.parentNode);
    	if (el == null) {
    		// calls closeHandler which should hide the calendar.
    		window.calendar.callCloseHandler();
    		Calendar.stopEvent(ev);
    	}
    };
    
    /** Shows the calendar. */
    Calendar.prototype.show = function () {
    	var rows = this.table.getElementsByTagName("tr");
    	for (var i = rows.length; i > 0;) {
    		var row = rows[--i];
    		Calendar.removeClass(row, "rowhilite");
    		var cells = row.getElementsByTagName("td");
    		for (var j = cells.length; j > 0;) {
    			var cell = cells[--j];
    			Calendar.removeClass(cell, "hilite");
    			Calendar.removeClass(cell, "active");
    		}
    	}
    	this.element.style.display = "block";
    	this.hidden = false;
    	if (this.isPopup) {
    		window.calendar = this;
    		Calendar.addEvent(document, "keydown", Calendar._keyEvent);
    		Calendar.addEvent(document, "keypress", Calendar._keyEvent);
    		Calendar.addEvent(document, "mousedown", Calendar._checkCalendar);
    	}
    	this.showMonthsCombo();
    	this.hideShowCovered();
    };
    
    /**
     *  Hides the calendar.  Also removes any "hilite" from the class of any TD
     *  element.
     */
    Calendar.prototype.hide = function () {
    	if (this.isPopup) {
    		Calendar.removeEvent(document, "keydown", Calendar._keyEvent);
    		Calendar.removeEvent(document, "keypress", Calendar._keyEvent);
    		Calendar.removeEvent(document, "mousedown", Calendar._checkCalendar);
    	}
    	this.element.style.display = "none";
    	this.hidden = true;
    	this.hideShowCovered();
    };
    
    /**
     *  Shows the calendar at a given absolute position (beware that, depending on
     *  the calendar element style -- position property -- this might be relative
     *  to the parent's containing rectangle).
     */
    Calendar.prototype.showAt = function (x, y) {
    	var s = this.element.style;
    	s.left = x + "px";
    	s.top = y + "px";
    	this.show();
    };
    
    /** Shows the calendar near a given element. */
    Calendar.prototype.showAtElement = function (el,moveX) {
    	var p = Calendar.getAbsolutePos(el);
    	var b = el;
    	while(b.offsetParent) {
    		b = b.offsetParent;
    	}
    	//alert(b.tagName + "--" +b.offsetWidth);
    	if(moveX ==null)
    	{
    		if(b.offsetWidth-p.x<170){
    		this.showAt(p.x-170+(b.offsetWidth-p.x), p.y + el.offsetHeight);
    		}
    		else
    		{
    		this.showAt(p.x, p.y + el.offsetHeight);
    		}
    }
    	else
    		this.showAt(p.x - moveX, p.y + el.offsetHeight);
    };
    Calendar.prototype.showAtElementXY = function (el,moveX,moveY) {
    	var p = Calendar.getAbsolutePos(el);
    	if(moveX ==null)
    		this.showAt(p.x, p.y + el.offsetHeight);
    	else
    		this.showAt(p.x - moveX, p.y + el.offsetHeight - moveY);
    };
    
    /** Customizes the date format. */
    Calendar.prototype.setDateFormat = function (str) {
    	this.dateFormat = str;
    };
    
    /** Customizes the tooltip date format. */
    Calendar.prototype.setTtDateFormat = function (str) {
    	this.ttDateFormat = str;
    };
    
    /**
     *  Tries to identify the date represented in a string.  If successful it also
     *  calls this.setDate which moves the calendar to the given date.
     */
    Calendar.prototype.parseDate = function (str, fmt) {
    	var y = 0;
    	var m = -1;
    	var d = 0;
    	var a = str.split(/\W+/);
    	if (!fmt) {
    		fmt = this.dateFormat;
    	}
    	var b = fmt.split(/\W+/);
    	var i = 0, j = 0;
    	for (i = 0; i < a.length; ++i) {
    		if (b[i] == "D" || b[i] == "DD") {
    			continue;
    		}
    		if (b[i] == "d" || b[i] == "dd") {
    			d = parseInt(a[i]);
    		}
    		if (b[i] == "m" || b[i] == "mm") {
    			m = parseInt(a[i]) - 1;
    		}
    		if (b[i] == "y") {
    			y = parseInt(a[i]);
    		}
    		if (b[i] == "yy") {
    			y = parseInt(a[i]) + 1900;
    		}
    		if (b[i] == "M" || b[i] == "MM") {
    			for (j = 0; j < 12; ++j) {
    				if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { m = j; break; }
    			}
    		}
    	}
    	if (y != 0 && m != -1 && d != 0) {
    		this.setDate(new Date(y, m, d));
    		return;
    	}
    	y = 0; m = -1; d = 0;
    	for (i = 0; i < a.length; ++i) {
    		if (a[i].search(/[a-zA-Z]+/) != -1) {
    			var t = -1;
    			for (j = 0; j < 12; ++j) {
    				if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { t = j; break; }
    			}
    			if (t != -1) {
    				if (m != -1) {
    					d = m+1;
    				}
    				m = t;
    			}
    		} else if (parseInt(a[i]) <= 12 && m == -1) {
    			m = a[i]-1;
    		} else if (parseInt(a[i]) > 31 && y == 0) {
    			y = a[i];
    		} else if (d == 0) {
    			d = a[i];
    		}
    	}
    	if (y == 0) {
    		var today = new Date();
    		y = today.getFullYear();
    	}
    	if (m != -1 && d != 0) {
    		this.setDate(new Date(y, m, d));
    	}
    	else	//2005-01-24 徐侠君添加
    	{
    		this.setDate(new Date());
    	}
    };
    
    Calendar.prototype.hideShowCovered = function () {
    	var tags = new Array("applet", "iframe", "select");
    	var el = this.element;
    
    	var p = Calendar.getAbsolutePos(el);
    	var EX1 = p.x;
    	var EX2 = el.offsetWidth + EX1;
    	var EY1 = p.y;
    	var EY2 = el.offsetHeight + EY1;
    
    	for (var k = tags.length; k > 0; ) {
    		var ar = document.getElementsByTagName(tags[--k]);
    		var cc = null;
    
    		for (var i = ar.length; i > 0;) {
    			cc = ar[--i];
    
    			p = Calendar.getAbsolutePos(cc);
    			var CX1 = p.x;
    			var CX2 = cc.offsetWidth + CX1;
    			var CY1 = p.y;
    			var CY2 = cc.offsetHeight + CY1;
    
    			if (this.hidden || (CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
    				cc.style.visibility = "visible";
    			} else {
    				cc.style.visibility = "hidden";
    			}
    		}
    	}
    };
    
    /** Internal function; it displays the bar with the names of the weekday. */
    Calendar.prototype._displayWeekdays = function () {
    	var MON = this.mondayFirst ? 0 : 1;
    	var SUN = this.mondayFirst ? 6 : 0;
    	var SAT = this.mondayFirst ? 5 : 6;
    	var cell = this.firstdayname;
    	for (var i = 0; i < 7; ++i) {
    		cell.className = "day name";
    		if (!i) {
    			cell.ttip = this.mondayFirst ? Calendar._TT["SUN_FIRST"] : Calendar._TT["MON_FIRST"];
    			cell.navtype = 100;
    			cell.calendar = this;
    			Calendar._add_evs(cell);
    		}
    		if (i == SUN || i == SAT) {
    			Calendar.addClass(cell, "weekend");
    		}
    		cell.firstChild.data = Calendar._DN3[i + 1 - MON];
    		cell = cell.nextSibling;
    	}
    };
    
    /** Internal function.  Hides all combo boxes that might be displayed. */
    Calendar.prototype._hideCombos = function () {
    	this.monthsCombo.style.display = "none";
    	this.yearsCombo.style.display = "none";
    };
    
    /** Internal function.  Starts dragging the element. */
    Calendar.prototype._dragStart = function (ev) {
    	if (this.dragging) {
    		return;
    	}
    	this.dragging = true;
    	var posX;
    	var posY;
    	if (Calendar.is_ie) {
    		posY = window.event.clientY + document.body.scrollTop;
    		posX = window.event.clientX + document.body.scrollLeft;
    	} else {
    		posY = ev.clientY + window.scrollY;
    		posX = ev.clientX + window.scrollX;
    	}
    	var st = this.element.style;
    	this.xOffs = posX - parseInt(st.left);
    	this.yOffs = posY - parseInt(st.top);
    	with (Calendar) {
    		addEvent(document, "mousemove", calDragIt);
    		addEvent(document, "mouseover", stopEvent);
    		addEvent(document, "mouseup", calDragEnd);
    	}
    };
    
    // BEGIN: DATE OBJECT PATCHES
    
    /** Adds the number of days array to the Date object. */
    Date._MD = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    
    /** Constants used for time computations */
    Date.SECOND = 1000 /* milliseconds */;
    Date.MINUTE = 60 * Date.SECOND;
    Date.HOUR   = 60 * Date.MINUTE;
    Date.DAY    = 24 * Date.HOUR;
    Date.WEEK   =  7 * Date.DAY;
    
    /** Returns the number of days in the current month */
    Date.prototype.getMonthDays = function(month) {
    	var year = this.getFullYear();
    	if (typeof month == "undefined") {
    		month = this.getMonth();
    	}
    	if (((0 == (year%4)) && ( (0 != (year%100)) || (0 == (year%400)))) && month == 1) {
    		return 29;
    	} else {
    		return Date._MD[month];
    	}
    };
    
    /** Returns the number of the week.  The algorithm was "stolen" from PPK's
     * website, hope it's correct :) http://www.xs4all.nl/~ppk/js/week.html */
    Date.prototype.getWeekNumber = function() {
    	var now = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0);
    	var then = new Date(this.getFullYear(), 0, 1, 0, 0, 0);
    	var time = now - then;
    	var day = then.getDay();
    	(day > 3) && (day -= 4) || (day += 3);
    	return Math.round(((time / Date.DAY) + day) / 7);
    };
    
    /** Checks dates equality (ignores time) */
    Date.prototype.equalsTo = function(date) {
    	return ((this.getFullYear() == date.getFullYear()) &&
    		(this.getMonth() == date.getMonth()) &&
    		(this.getDate() == date.getDate()));
    };
    
    /** Prints the date in a string according to the given format. */
    Date.prototype.print = function (frm) {
    	var str = new String(frm);
    	var m = this.getMonth();
    	var d = this.getDate();
    	var y = this.getFullYear();
    	var wn = this.getWeekNumber();
    	var w = this.getDay();
    	var s = new Array();
    	s["d"] = d;
    	s["dd"] = (d < 10) ? ("0" + d) : d;
    	s["m"] = 1+m;
    	s["mm"] = (m < 9) ? ("0" + (1+m)) : (1+m);
    	s["y"] = y;
    	s["yy"] = new String(y).substr(2, 2);
    	s["w"] = wn;
    	s["ww"] = (wn < 10) ? ("0" + wn) : wn;
    	with (Calendar) {
    		s["D"] = _DN3[w];
    		s["DD"] = _DN[w];
    		s["M"] = _MN3[m];
    		s["MM"] = _MN[m];
    	}
    	//alert(str);
    	var re = /(.*)(\W|^)(d|dd|m|mm|y|yy|MM|M|DD|D|w|ww)(\W|$)(.*)/;
    	while (re.exec(str) != null) {
    		//str = RegExp.$1 + RegExp.$2 + s[RegExp.$3] + RegExp.$4 + RegExp.$5;
    		str = RegExp.$1 + RegExp.$2 + s[RegExp.$3] + RegExp.$4 + RegExp.$5;
    	}
    	return str;
    };
    
    // END: DATE OBJECT PATCHES
    
    // global object that remembers the calendar
    window.calendar = null;
    
    // 以下本地化中文2004.11.05
    Calendar._DN = new Array
    ("日",
     "一",
     "二",
     "三",
     "四",
     "五",
     "六",
     "日");
    Calendar._MN = new Array
    ("一月",
     "二月",
     "三月",
     "四月",
     "五月",
     "六月",
     "七月",
     "八月",
     "九月",
     "十月",
     "十一月",
     "十二月");
    
    // tooltips
    Calendar._TT = {};
    Calendar._TT["TOGGLE"] = "切换周首日";
    Calendar._TT["PREV_YEAR"] = "按住菜单,下拉选择年份";
    Calendar._TT["PREV_MONTH"] = "按住菜单,下拉选择月份";
    Calendar._TT["GO_TODAY"] = "选择本日";
    Calendar._TT["NEXT_MONTH"] = "按住菜单,下拉选择月份";
    Calendar._TT["NEXT_YEAR"] = "按住菜单,下拉选择年份";
    Calendar._TT["SEL_DATE"] = "选择日期";
    Calendar._TT["DRAG_TO_MOVE"] = "拖曳";
    Calendar._TT["PART_TODAY"] = " (本日)";
    Calendar._TT["MON_FIRST"] = "以周一作为第一天";
    Calendar._TT["SUN_FIRST"] = "以周日作为第一天";
    Calendar._TT["CLOSE"] = "关闭";
    Calendar._TT["TODAY"] = "选择本日";
    
    // date formats
    Calendar._TT["DEF_DATE_FORMAT"] = "y-mm-dd";
    Calendar._TT["TT_DATE_FORMAT"] = "D, M d";
    
    Calendar._TT["WK"] = "星期";
    // 以上本地化中文2004.11.05
    
    
    //以下全局调用函数2004.11.05
    var calendar;
    function selected(cal, date) {
      cal.sel.value = date; // just update the date in the input field.
      if (cal.sel.id == "sel1" || cal.sel.id == "sel3")
        // if we add this call we close the calendar on single-click.
        // just to exemplify both cases, we are using this only for the 1st
        // and the 3rd field, while 2nd and 4th will still require double-click.
        cal.callCloseHandler();
    }
    function showCalendar(id, format,moveX) {
      var el = document.getElementById(id);
      if (calendar != null) {
        // we already have some calendar created
        calendar.hide();                 // so we hide it first.
      } else {
        // first-time call, create the calendar.
        var cal = new Calendar(false, null, selected, closeHandler);
        // uncomment the following line to hide the week numbers
        // cal.weekNumbers = false;
        calendar = cal;                  // remember it in the global var
        cal.setRange(1900, 2070);        // min/max year allowed.
        cal.create();
      }
      calendar.setDateFormat(format);    // set the specified date format
      calendar.parseDate(el.value);      // try to parse the text in field
      calendar.sel = el;                 // inform it what input field we use
      calendar.showAtElement(el,moveX);  
      return false;
    }
    function showCalendarXY(id, format,moveX,moveY) {
      var el = document.getElementById(id);
      if (calendar != null) {
        // we already have some calendar created
        calendar.hide();                 // so we hide it first.
      } else {
        // first-time call, create the calendar.
        var cal = new Calendar(false, null, selected, closeHandler);
        // uncomment the following line to hide the week numbers
        // cal.weekNumbers = false;
        calendar = cal;                  // remember it in the global var
        cal.setRange(1900, 2070);        // min/max year allowed.
        cal.create();
      }
      calendar.setDateFormat(format);    // set the specified date format
      calendar.parseDate(el.value);      // try to parse the text in field
      calendar.sel = el;                 // inform it what input field we use
      calendar.showAtElementXY(el,moveX,moveY);  
      return false;
    }
    function closeHandler(cal) {
      cal.hide();                        // hide the calendar
    }


    前台代码

    <input name="abc" type="text" id="abc" onClick="return showCalendar('abc', 'y-mm-dd');">


    展开全文
  • 日期选择框架

    千次阅读 2017-09-16 15:12:58
    全面重写的 layDate 包含了大量的更新,其中主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。内置强劲的自定义日期格式...

    全面重写的 layDate 包含了大量的更新,其中主要以:年选择器年月选择器日期选择器时间选择器日期时间选择器 五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。内置强劲的自定义日期格式解析和合法校正机制,含中文版和国际版,主题简约却又不失灵活多样。

    插件地址:

                   http://www.layui.com/laydate/

    用法:


    type-类型

    type可选值 名称 用途
    year 年选择器 只提供年列表选择
    month 年月选择器 只提供年、月选择
    date 日期选择器 可选择:年、月、日。type默认值,一般可不填
    time 时间选择器 只提供时、分、秒选择
    datetime 日期时间选择器 可选择:年、月、日、时、分、秒
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <input type="text" id="calendar"/>
    <label ></label>
    <input type="text" id="b"/>
    </body>
    <script src="../assets/jq/jquery-1.9.1.min.js"></script>
    <script src="../assets/laydate/laydate.js"></script>
    <script>
        laydate.render({
            elem:"#calendar",
            type:"time",
        })
    </script>
    </html>
    显示图:



    range -开启左右面板范围选择

    类型:默认值:false

    false显示图:


    如果设置 true,将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。

    true显示图:



    format

    类型:String,默认值:yyyy-MM-dd


    通过日期时间各自的格式符和长度,来设定一个你所需要的日期格式。layDate 支持的格式如下:

    格式符 说明
    yyyy 年份,至少四位数。如果不足四位,则前面补零
    y 年份,不限制位数,即不管年份多少位,前面均不补零
    MM 月份,至少两位数。如果不足两位,则前面补零。
    M 月份,允许一位数。
    dd 日期,至少两位数。如果不足两位,则前面补零。
    d 日期,允许一位数。
    HH 小时,至少两位数。如果不足两位,则前面补零。
    H 小时,允许一位数。
    mm 分钟,至少两位数。如果不足两位,则前面补零。
    m 分钟,允许一位数。
    ss 秒数,至少两位数。如果不足两位,则前面补零。
    s 秒数,允许一位数。

    通过上述不同的格式符组合成一段日期时间字符串,可任意排版,如下所示:

    格式 示例值
    yyyy-MM-dd HH:mm:ss 2017-08-18 20:08:08
    yyyy年MM月dd日 HH时mm分ss秒 2017年08月18日 20时08分08秒
    yyyyMMdd 20170818
    dd/MM/yyyy 18/08/2017
    yyyy年M月 2017年8月
    M月d日 8月18日
    北京时间:HH点mm分 北京时间:20点08分
    yyyy年的M月某天晚上,大概H点 2017年的8月某天晚上,大概20点
    yyyy-MM-dd HH:mm:ss显示图:


    Mark-标注重要的日子
    calendar 参数所代表的公历节日更多情况下是一个摆设。因此,我们还需要自定义标注重要日子,比如结婚纪念日?日程等?它分为以下两种:

    标注 格式 说明
    每年的日期 {'0-9-18': '国耻'} 0 即代表每一年
    每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月(layui 2.1.1/layDate 5.0.4 新增)
    特定的日期 {'2017-8-21': '发布') -
    //标注重要日子
    var ins1 = laydate.render({
      elem: '#test'
      ,mark: {
        '0-10-14': '生日'
        ,'0-12-31': '跨年' //每年12月31日
        ,'0-0-10': '工资' //每个月10号
        ,'2017-8-15': '' //具体日期
        ,'2017-8-20': '预发' //如果为空字符,则默认显示数字+徽章
        ,'2017-8-21': '发布'
      }
      ,done: function(value, date){
        if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日,弹出提示语
          ins1.hint('中国人民抗日战争胜利72周年');
        }
      }
    });
    非常实用的存在,是时候利用它制作你的日程表了。

    星期几显示

    <input type="text" id="a"/>
    <label ></label>


     laydate.render({
            elem: "#calendar",
            elem: "#calendar2",
            type:"date",
            value:new Date(),
            done:function(value,date){
           //需要找到date对应是周一
           var day =(new Date(value)).getDay();//获取date是这周的第几天(0-6)
       var dayStr = dayToChange(day)
                $(this.elem).next().html(dayStr);
                console.log(this)
            }
        })
        //(0-6)变成(周一-周天)
        function dayToChange(day){
            var dayList =["周日","周一","周二","周三","周四","周五","周六"];
            return dayList[day]
           
        }

    显示图



    展开全文
  • 漂亮的日期选择框,经典的日期选择框,常用的日期选择框,在网页制作中常用!
  • 不得不说Antd的确蛮好用的...这是默认效果默认效果.png这是之后的效果完成效果.png第一步:根据官方文档导入下面的代码(你可以放在使用日期选择框的界面也可以放在main.js里面)// import zhCN from 'ant-design-vue...

    不得不说Antd的确蛮好用的,但是还是要吐槽,遇到一点问题百度基本上解决不了,而且文档写的也的确不怎么样

    就这个日期选择器,默认竟然不支持中文???而且百度了半天都是什么鬼???

    这是默认效果

    默认效果.png

    这是之后的效果

    完成效果.png

    第一步:根据官方文档导入下面的代码(你可以放在使用日期选择框的界面也可以放在main.js里面)

    // import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';

    import moment from 'moment';

    import 'moment/locale/zh-cn';

    moment.locale('zh-cn');

    第二步:对上一步进行一个改善

    2-1:在你使用日期选择器的页面加入下面的这个变量(变量名随意,我就叫 locale)

    locale:{

    "lang": {

    "placeholder": "请选择日期",

    "today": "今天",

    "yearFormat": "YYYY",

    "dateFormat": "M/D/YYYY",

    "dayFormat": "D",

    "dateTimeFormat": "M/D/YYYY HH:mm:ss",

    "monthFormat": "MMMM"

    }

    }

    2-2:在你的日期选择框上加上这句代码 :locale=locale

    代码.png

    2-3:最终效果

    完成效果.png

    更多配置看这里

    locale:{

    "lang": {

    "placeholder": "请选择日期",

    "rangePlaceholder": ["Start date", "End date"],

    "today": "今天",

    "now": "Now",

    "backToToday": "Back to today",

    "ok": "Ok",

    "clear": "Clear",

    "month": "Month",

    "year": "Year",

    "timeSelect": "Select time",

    "dateSelect": "Select date",

    "monthSelect": "Choose a month",

    "yearSelect": "Choose a year",

    "decadeSelect": "Choose a decade",

    "yearFormat": "YYYY",

    "dateFormat": "M/D/YYYY",

    "dayFormat": "D",

    "dateTimeFormat": "M/D/YYYY HH:mm:ss",

    "monthFormat": "MMMM",

    "monthBeforeYear": true,

    "previousMonth": "Previous month (PageUp)",

    "nextMonth": "Next month (PageDown)",

    "previousYear": "Last year (Control + left)",

    "nextYear": "Next year (Control + right)",

    "previousDecade": "Last decade",

    "nextDecade": "Next decade",

    "previousCentury": "Last century",

    "nextCentury": "Next century"

    },

    "timePickerLocale": {

    "placeholder": "Select time"

    }

    }

    展开全文
  • 前台日期选择框实例

    2018-07-10 18:58:31
    前台日期选择框实例。。。。。。。。。。。。。。。。。。。。
  • html5 多种日期选择框

    2015-12-10 20:52:35
    多种日期选择框,模拟手机app日期选择框的多种效果
  • select选择框和日期选择框无法选择 <pre><code>js <template> <div style="width: 1000px; margin: 0 auto"> <vxe-table border show-all-overflow show-footer class="vxe-...
  • 文/江觅Excel vba 里日期选择一直是个很大问题,这两天做了一个日期选择功能,利用无标题栏窗体显示日期,效果不错。调用下面是日期选择窗体,其中只有一个文本对话框。是不是太简单了,也可以在任何窗体中调用。...

    文/江觅

    Excel vba 里日期选择一直是个很大问题,这两天做了一个日期选择功能,利用无标题栏窗体显示日期,效果不错。

    调用

    下面是日期选择窗体,其中只有一个文本对话框。是不是太简单了,也可以在任何窗体中调用。

    ee053739935a54413412b891879ea025.png

    选择日期

    双击TextBox文本对话框调出日期选择表单。就是下面的样式,可以选择年和月份,日历自动切换。

    e42f34dd51ea9fe8b983a631434f33e9.gif

    整体效果

    其实,以前一直想做这样一个日期选择,但是一直不能掌握相关的编程方法,经过分析和逐步调试,结果做了出来,以后可以对编程中的日期选择更加方便了。

    d5a8b6676d8b338c9411f34c7829d6f8.png

    编程过程中遇到一些问题,总是难免的,但是遇到问题后如何解决,才是需要认真思考的内容。其实并没有对实现这样的功能抱希望,不能确定是否做出来,结果做了出来,这也在下一步的学习当中更加清醒地认识到,别对希望过早表示失望。

    b0c9cbb32c556a3b2b8fe197b19b448a.png

    不足之处

    其实还有一些没有完善的地方,比如窗体显示位置还没有定位,由于时间关系,没有深入研究,可能目前不在我的认知范围,所以也没有做好定位。

    76c85ee024dabeeb4a6ada2f461aa487.png

    结尾

    代码比较多,也比较不好理解,所以就不贴出来献丑了。

    每做完一个功能,就解脱一次,像缠绕在身上的绳一下子松开了,大概这就所谓的解脱吧!

    其实,做这些东西并没有多大的意义,更多的是一种爱好或者说对自己的鞭策,让自己不要变得慵懒了,更加努力和勤快一些。大脑不思考就会渐渐退化,失去判断能力。

    展开全文
  • 项目中我们各种日期选择都会用到,这里介绍项目中使用Antdesign-vue框架的日期选择框遇到的问题 官方示例控件中没有年度选择的示例,这里总结了网上的网友提到的一些api,做出来的效果,发下效果图 官方文档提供...
  • 先看效果:1、单选日历控件2、双选日历控件一、实现原理:1、界面部分:2、事件部分:①日期框中增加鼠标点击事件,弹出动态面板(日期选择框)②日期选择弹窗中,日历数据是一个中继器,鼠标选择中继器的某个单元后...
  • 项目UI框架选用阿里的AntVue,这里总结一下该框架下日期选择框的一些注意事项 首先介绍的就是该框架组件v-model绑定的值并不是显示上的YYYY-MM-DD格式,而是moment类型数据,所以采用该组件时, 一、你需另行安装...
  • 做一个自动查询每一天数据的功能,要求每个循环结束后,日期选择框中的日期增加一天; 代码如下: dtpDate.Value = dtpDate.Value.AddDays(1);
  • easyui日期选择框需要实现一个多选的操作,日期之间用','分割。求点拨一下,谢谢~
  • DatePicker 日期选择框 业务需求 设置两个时间选择框,一个是开始时间,一个是结束时间,两者相互制约,开始不能早于结束,结束不能小于开始 代码示例 1.html <a-form-item label="生效日期"> <date-time-...
  • 相信大家开发项目实现某个模块功能的时候不可避免会碰到选择日期的小功能。...xml布局显示如下,即用户看到的界面: 操作的话很简单,用户点击日期选择处区域,然后弹出日期选择框,用户可以自己选择日期
  • 第一部分:日期选择框的简单使用 1.1 选择iPhone屏幕 1.2 拖进一个UIPickerView日期选择框 运行后发现全是英文显示 如下图所示: 1.3 打开storyboard对应的属性设置,设置Mode属性可以设置日期选择框的样式,...
  • 2、在使用日期选择框的时候,当我们没有进行初始化,并格式化日期时,会出现以下情况 3、解决方法: 在state初始化时给予日期值为undefined 在日期选择框中进行判断 <DatePicker style={{ width: '110px' }...
  • Ant Design of Vue DatePicker 日期选择框通过mode = "year"控制,弹出面板以年份显示,但是无法选择,也无法关闭面板 解决方案 将控制面板打开/关闭的yearShow,需要在得到后台数据时将它添加到每条数据中,如果...
  • sench touch :日期选择框
  • Bootstrap Table+日期选择框实例,可配合Ajax直接用于实际项目开发,亲测可用
  • 主要介绍了微信小程序使用picker实现时间和日期选择框功能,结合实例形式分析了微信小程序picker组件进行日期与时间选择的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
  • 问题描述: 在使用ant-design-vue中的组件 ...),下拉选选择A类数据后,选择日期选择框,再将下拉选中的数据选成B类数据,则日期选择框中的数据不显示了;要是下拉选中选择B类数据,选择日期之后,下拉选再选择...
  • 在jsp页面中的日期选择框

    热门讨论 2008-06-09 21:26:34
    在jsp页面中的日期选择框
  • React中antd日期选择框选择时间区间,禁用时间今天为基准,今天以前可选,今天以后可选区间范围可选 今天为基准,今天以前可选,今天以后可选 handleDate= current => { if (!current) { return false } else ...
  • html日期选择框

    万次阅读 2017-09-27 23:02:20
    <!DOCTYPE html> <title></title> ​ 日期: </form>
  • nui— DatePicker:日期选择框

    千次阅读 2018-10-11 16:20:22
    5.12 DatePicker:日期选择框 转至元数据结尾   创建: 未知用户 (zhangping),最新修改于: 八月 07, 2015 转至元数据起始 创建DatePicker 只需要一个id即可创建表单对象: &lt;input id="...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,202
精华内容 1,280
关键字:

日期选择框