ASP.NET日期选择控件

    最近做一个项目的时候需要用到日期选择功能，本以为asp.net会有的，结果发现只有在winform下才可以使用这个datetimePicker，web下并没有提供这个功能。于是Google，网上有很多大牛用不同的方法解决了这个问题，其中有一个是出现率最高的，主要使用js实现，洋洋洒洒近300行的代码，自己实在看不懂，但是只要好用就好了，转载如下。

 

calendar.js

//日期选择 var gdCtrl = new Object(); var goSelectTag = new Array(); var gcGray = "#e8e8ea"; var gcToggle = "#ffff00"; var gcBG = "#FFFFFF"; var gcBorder = "#000000" var gcFont = "#000000" var BgColor = "#FFFFFF"; var previousObject = null; var targert; var noOtherMonth = 1; var gdCurDate = new Date(); var giYear = gdCurDate.getFullYear(); var giMonth = gdCurDate.getMonth() + 1; var giDay = gdCurDate.getDate(); var gCalMode = ""; var gCalDefDate = ""; var CAL_MODE_NOBLANK = "2"; function fSetDate(iYear, iMonth, iDay) { //VicPopCal.style.visibility = "hidden"; if ((iYear == 0) && (iMonth == 0) && (iDay == 0)) { gdCtrl.value = ""; } else { iMonth = iMonth + 100 + ""; iMonth = iMonth.substring(1); iDay = iDay + 100 + ""; iDay = iDay.substring(1); gdCtrl.value = iYear + "-" + iMonth + "-" + iDay; } for (i in goSelectTag) goSelectTag[i].style.visibility = "visible"; goSelectTag.length = 0; window.returnValue = gdCtrl.value; target.value = gdCtrl.value; window.close(); } function HiddenDiv() { var i; VicPopCal.style.visibility = "hidden"; for (i in goSelectTag) goSelectTag[i].style.visibility = "visible"; goSelectTag.length = 0; } function fSetSelected(aCell) { var iOffset = 0; var iYear = parseInt(tbSelYear.value); var iMonth = parseInt(tbSelMonth.value); aCell.bgColor = gcBG; with (aCell.children["cellText"]) { var iDay = parseInt(innerText); if (color == gcGray) { if (noOtherMonth != 1) { iOffset = (Victor < 10) ? -1 : 1; iOffset = (iDay < 15) ? 1 : -1; } else { return 1; } } iMonth += iOffset; if (iMonth < 1) { iYear--; iMonth = 12; } else if (iMonth > 12) { iYear++; iMonth = 1; } } fSetDate(iYear, iMonth, iDay); } function Point(iX, iY) { this.x = iX; this.y = iY; } function fBuildCal(iYear, iMonth) { var aMonth = new Array(); for (i = 1; i < 7; i++) aMonth[i] = new Array(i); var dCalDate = new Date(iYear, iMonth - 1, 1); var iDayOfFirst = dCalDate.getDay(); var iDaysInMonth = new Date(iYear, iMonth, 0).getDate(); var iOffsetLast = new Date(iYear, iMonth - 1, 0).getDate() - iDayOfFirst + 1; var iDate = 1; var iNext = 1; for (d = 0; d < 7; d++) aMonth[1][d] = (d < iDayOfFirst) ? -(iOffsetLast + d) : iDate++; for (w = 2; w < 7; w++) for (d = 0; d < 7; d++) aMonth[w][d] = (iDate <= iDaysInMonth) ? iDate++ : -(iNext++); return aMonth; } function fDrawCal(iYear, iMonth, iCellHeight, sDateTextSize) { var WeekDay = new Array("日", "一", "二", "三", "四", "五", "六"); var styleTD = " bgcolor='" + gcBG + "' bordercolor='" + gcBorder + "' valign='middle' align='center' height='20' style='font-size:12px; "; var styleTD2 = "valign='middle' align='center' height='" + iCellHeight + "' style='font-size:12px; "; with (document) { write(""); for (i = 0; i < 7; i++) write("" + WeekDay[i] + ""); write(""); for (w = 1; w < 7; w++) { write(""); for (d = 0; d < 7; d++) { write(""); write(" "); write("") } write(""); } } } function fUpdateCal(iYear, iMonth) { myMonth = fBuildCal(iYear, iMonth); var i = 0; for (w = 0; w < 6; w++) for (d = 0; d < 7; d++) with (cellText[(7 * w) + d]) { Victor = i++; if (myMonth[w + 1][d] < 0) { color = gcGray; if (noOtherMonth != 1) innerText = -myMonth[w + 1][d]; else innerText = " "; } else { // Modified by maxiang for we need // Saturday displayed in blue font color. //color = ((d==0)||(d==6))?"red":"black"; if (d == 0) { color = "red"; } else if (d == 6) { color = "blue"; } else { color = "black"; } // End of above maxiang innerText = myMonth[w + 1][d]; } } } function fSetYearMon(iYear, iMon) { tbSelMonth.options[iMon - 1].selected = true; for (i = 0; i < tbSelYear.length; i++) if (tbSelYear.options[i].value == iYear) tbSelYear.options[i].selected = true; fUpdateCal(iYear, iMon); } function fPrevMonth() { var iMon = tbSelMonth.value; var iYear = tbSelYear.value; if (--iMon < 1) { iMon = 12; iYear--; } fSetYearMon(iYear, iMon); } function fNextMonth() { var iMon = tbSelMonth.value; var iYear = tbSelYear.value; if (++iMon > 12) { iMon = 1; iYear++; } fSetYearMon(iYear, iMon); } function fToggleTags() { with (document.all.tags("SELECT")) { for (i = 0; i < length; i++) if ((item(i).Victor != "Won") && fTagInBound(item(i))) { item(i).style.visibility = "hidden"; goSelectTag[goSelectTag.length] = item(i); } } } function fTagInBound(aTag) { with (VicPopCal.style) { var l = parseInt(left); var t = parseInt(top); var r = l + parseInt(width); var b = t + parseInt(height); var ptLT = fGetXY(aTag); return !((ptLT.x > r) || (ptLT.x + aTag.offsetWidth < l) || (ptLT.y > b) || (ptLT.y + aTag.offsetHeight < t)); } } function fGetXY(aTag) { var oTmp = aTag; var pt = new Point(0, 0); do { pt.x += oTmp.offsetLeft; pt.y += oTmp.offsetTop; oTmp = oTmp.offsetParent; } while (oTmp.tagName != "BODY"); return pt; } // Main: popCtrl is the widget beyond which you want this calendar to appear; // dateCtrl is the widget into which you want to put the selected date. // i.e.: function fPopCalendar(popCtrl, dateCtrl, Targetctrl, mode, defDate) { gCalMode = mode; gCalDefDate = defDate; target = Targetctrl; if (popCtrl == previousObject) { if (VicPopCal.style.visibility == "visible") { //HiddenDiv(); return true; } } previousObject = popCtrl; gdCtrl = dateCtrl; fSetYearMon(giYear, giMonth); var point = fGetXY(popCtrl); if (gCalMode == CAL_MODE_NOBLANK) { document.all.CAL_B_BLANK.style.visibility = "hidden"; } else { document.all.CAL_B_BLANK.style.visibility = "visible"; } with (VicPopCal.style) { left = point.x; top = point.y + popCtrl.offsetHeight; width = VicPopCal.offsetWidth; height = VicPopCal.offsetHeight; fToggleTags(point); visibility = 'visible'; } } var gMonths = new Array("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"); with (document) { write("

"); write(""); write(""); write(""); write(""); write(""); write(""); write("

"); write(" "); for (i = 1949; i < 2020; i++) write("" + i + "年"); write(""); write(" "); for (i = 0; i < 12; i++) write("" + gMonths[i] + ""); write(""); write(" "); write("

"); write(""); fDrawCal(giYear, giMonth, 8, '12'); write(""); write("

"); write(" "); write(""); write(" "); write("    当前日期: " + giYear + "/" + giMonth + "/" + giDay + ""); write(" "); write("

"); }

 

Calendar.htm

 

新建一个web.aspx,使用方法如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="web.aspx.cs" Inherits="ASP.net.web" %>

开始时间： 

 

效果如下：