在网上找到一个js的日期选着控件
calendar.htc
<public:component tagname="calendar">
<public:attach event="onfocus" onevent="show()" />
<public:attach event="onblur" onevent="hide()" />
<public:property name="format" />
<public:property name="status" />
<public:method name="showCurrentDate" />
<public:method name="hide" />
<public:method name="showMore" />
<script>
if (format==null)
format = "yyyy-mm-dd";
function calculateSumOffset(item, offsetName) {
var totalOffset = 0;
do {
totalOffset += eval('item.'+offsetName);
item = eval('item.offsetParent');
} while (item != null);
return totalOffset;
}
function hideElement(elmID) {
var leftX, rightX, topY, bottomY, objLeft, objTop;
for (i = 0; i < document.all.tags(elmID).length; i++) {
obj = document.all.tags(elmID)[i];
if (! obj || ! obj.offsetParent)
continue;
// Find the element's offsetTop and offsetLeft relative to the BODY tag.
leftX = calculateSumOffset(tblMonthView, 'offsetLeft');
rightX = leftX + tblMonthView.offsetWidth;
topY = calculateSumOffset(tblMonthView, 'offsetTop');
bottomY = topY + tblMonthView.offsetHeight;
objLeft = calculateSumOffset(obj, 'offsetLeft');
objTop = calculateSumOffset(obj, 'offsetTop');
if (leftX > (objLeft + obj.offsetWidth) || objLeft > rightX) ;
else if (objTop > bottomY) ;
else obj.style.visibility = "hidden";
}
}
function showElement(elmID) {
for (i = 0; i < document.all.tags(elmID).length; i++) {
obj = document.all.tags(elmID)[i];
if (! obj || ! obj.offsetParent)
continue;
obj.style.visibility = "";
}
}
var arrWeekName = new Array("日","一","二","三","四","五","六");
var today = new Date();
var currentYear, currentMonth, inputYear, inputMonth, inputDate;
currentYear = inputYear = today.getYear();
currentMonth = inputMonth = today.getMonth();
inputDate = today.getDate();
status = false;
var tblMonthView, trWeek, tdToday;
var tblShowDay;
var spanCurrentMonth, spanCurrentYear;
var divMore;
var strHTML = '<table id="MonthView' + uniqueID + '" cellpadding=0 cellspacing=0 lang=ch onselectstart="return false" onmouseover="' + uniqueID + '.status=true;" onmouseout="' + uniqueID + '.status=false;" style="position:absolute; display:none; background:#FFFFFF; border:1 solid black;width:220;cursor:hand;">'
+ '<tr>'
+ ' <td>'
+ ' <table width="100%" border=0 cellpadding=1 cellspacing=1 id="ShowDay' + uniqueID + '" style="font-size:9pt;">'
+ ' <tr align="center">'
+ ' <td style="font-family:webdings;font-size:9pt;background:#A4B9D7;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showCurrentDate(/'py/')">33</td>'
+ ' <td style="font-family:webdings;font-size:9pt;background:#A4B9D7;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showCurrentDate(/'pm/')">3</td>'
+ ' <td colspan="3" style="color:black;font-family:宋体;font-weight:bold;" nowarp>'
+ ' <span id="CurrentYear' + uniqueID + '" style="text-decoration:underline;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showMore(1990,2020,this.innerHTML)"></span> 年'
+ ' <span id="CurrentMonth' + uniqueID + '" style="text-decoration:underline;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showMore(1,12,this.innerHTML)"></span> 月</td>'
+ ' <td style="font-family:webdings;font-size:9pt;background:#A4B9D7;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showCurrentDate(/'nm/')">4</td>'
+ ' <td style="font-family:webdings;font-size:9pt;background:#A4B9D7;" onmouseover="this.style.color=/'white/'" onmouseout="this.style.color=/'black/'" onclick="' + uniqueID + '.showCurrentDate(/'ny/')">44</td>'
+ ' </tr>'
+ ' <tr id="Week' + uniqueID + '" style="font-size:9pt; color:black; text-align:center;"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'
+ ' <tr><td colspan=7 style="background-color:black; height:1pt;"></td></tr>'
+ ' </table>'
+ ' </td>'
+ '</tr>'
+ '<tr><td style="background-color:black; height:1pt;"></td></tr>'
+ '<tr>'
+ ' <td>'
+ ' <table width="100%" border=0 cellpadding=1 cellspacing=1>'
+ ' <tr style="font-size:9pt; color:black;">'
+ ' <td id="Today' + uniqueID + '"></td>'
+ ' <td id="Button' + uniqueID + '" style="text-align:right;" onclick="' + uniqueID + '.status=false;' + uniqueID + '.hide();">[关闭]</td>'
+ ' </tr>'
+ ' </table>'
+ ' </td>'
+ ' </tr>'
+ '</table>'
+ '<div id="More' + uniqueID + '" style="display:none; cursor:hand; font:9px verdana; width:80px; position:absolute; border:1px solid #425E87; overflow-y:scroll; overflow-x:hidden; background-color:#fff; FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#999999,offX=10,offY=10,direction=120,Strength=5); SCROLLBAR-FACE-COLOR: #E5E9F2; SCROLLBAR-HIGHLIGHT-COLOR:#E5E9F2; SCROLLBAR-SHADOW-COLOR:#A4B9D7; SCROLLBAR-3DLIGHT-COLOR: #A4B9D7; SCROLLBAR-ARROW-COLOR:#000000; SCROLLBAR-TRACK-COLOR:#eeeee6; SCROLLBAR-DARKSHADOW-COLOR: #ffffff;"></div>';
element.insertAdjacentHTML("afterEnd",strHTML);
tblMonthView = eval("MonthView" + uniqueID);
trWeek = eval("Week" + uniqueID);
tdToday = eval("Today" + uniqueID);
tblShowDay = eval("ShowDay" + uniqueID);
spanCurrentMonth = eval("CurrentMonth" + uniqueID);
spanCurrentYear = eval("CurrentYear" + uniqueID);
divMore = eval("More" + uniqueID);
for (var i=0; i<arrWeekName.length; i++)
trWeek.cells[i].innerHTML = arrWeekName[i];
tdToday.attachEvent("onclick", setTodayValue);
function formatDate(y, m, d, strFormat) {
var dm = (m>=10?m:"0" + m), dd = (d>=10?d:"0" + d);
return strFormat.replace(/yyyy/ig, y).replace(/mm/ig, dm).replace(/dd/ig, dd).replace(/m/ig, m).replace(/d/ig, d);
}
function setCaption(){
spanCurrentYear.innerHTML = currentYear;
spanCurrentMonth.innerHTML = formatDate(0, currentMonth + 1, 0, "mm");
}
function bulidDay(){
var arrMonthDay = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
if ((currentYear % 400 == 0) || ((currentYear % 100!=0) && (currentYear % 4==0)))
arrMonthDay[1] = 29;
while (tblShowDay.rows.length>3)
tblShowDay.deleteRow(3);
firstDay = new Date(currentYear,currentMonth,1);
weekDay = firstDay.getDay();
prevMonthEnd = arrMonthDay[(currentMonth>0?currentMonth - 1:11)];
prevMonthStart = prevMonthEnd - weekDay;
thisMonthStart = 0;
thisMonthEnd = arrMonthDay[currentMonth];
nextMonthStart = 0;
var d = new Date();
var nowDate = d.getDate();
var nowMonth = d.getMonth();
var nowYear = d.getYear();
var i, j;
for (i=0; i<6; i++) {
tempRow = tblShowDay.insertRow();
for (j=0; j<7; j++) {
tempCell = tempRow.insertCell();
tempCell.style.cssText = "border:1pt solid white; font-size:9pt; color:#808080; text-align:center;";
//填充当月1号以前的日期
if (prevMonthStart<prevMonthEnd)
tempCell.innerHTML = ++prevMonthStart;
//填充本月日期
else if (thisMonthStart<thisMonthEnd) {
tempCell.style.color = ((j==0 || j==6)?"red":"black");
tempCell.innerHTML = ++thisMonthStart;
tempCell.onclick = action;
tempCell.onmouseover = mouseover;
tempCell.onmouseout = mouseout;
if (nowYear==currentYear && nowMonth==currentMonth && nowDate==thisMonthStart)
tempCell.style.border = "1pt solid red";
if (inputYear==currentYear && inputMonth==currentMonth && inputDate==thisMonthStart)
tempCell.bgColor = "menu";
}
//填充下月日期
else tempCell.innerHTML = ++nextMonthStart;
}
}
}
function setTodayValue(){
with (new Date()) {
var strDate = formatDate(getYear(), (getMonth() + 1), getDate(), "yyyy-mm-dd");
tdToday.innerHTML = "今日:" + strDate;
element.value = strDate;
}
status = false;
hide();
}
function setToday(){
with (new Date()) {
tdToday.innerHTML = "今日:" + formatDate(getYear(), (getMonth() + 1), getDate(), "yyyy-mm-dd");
}
}
function showCurrentDate(cmd) {
switch (cmd) {
case "py":currentYear--; break;
case "ny":currentYear++; break;
case "pm":if (--currentMonth<0) {
currentMonth = 11;
currentYear--;
}
break;
case "nm":if (++currentMonth>11) {
currentMonth = 0;
currentYear++;
}
break;
}
setCaption();
bulidDay();
setToday();
//element.focus();
hideElement("SELECT");
hideElement("OBJECT");
}
function show() {
if (!status) {
var ParseRegx = new RegExp(format.replace(/yyyy/g, "(//d{4})").replace(/mm/g, "(//d{2})").replace(/dd/g, "(//d{2})"), "g");
var t = element.value.replace(ParseRegx, "$2-$3-$1");
var d = new Date(t);
if (isNaN(d))
d = new Date();
inputYear = currentYear = d.getYear();
inputMonth = currentMonth = d.getMonth();
inputDate = d.getDate();
element.value = formatDate(inputYear, (inputMonth + 1), inputDate, format);
setCaption();
bulidDay();
setToday();
tblMonthView.style.top = calculateSumOffset(element, "offsetTop") + element.offsetHeight;
tblMonthView.style.left = calculateSumOffset(element, "offsetLeft");
tblMonthView.style.display = "block";
element.focus();
hideElement("SELECT");
hideElement("OBJECT");
}
}
function hide() {
if (!status) {
showElement("SELECT");
showElement("OBJECT");
tblMonthView.style.display = "none";
}
}
function mouseover(){
this.bgColor="#9999FF";
}
function mouseout(){
if (inputYear==currentYear && inputMonth==currentMonth && inputDate==this.innerHTML)
this.bgColor="menu";
else
this.bgColor="#FFFFFF";
}
function action(){
inputYear = currentYear;
inputMonth = currentMonth;
inputDate = this.innerHTML;
bulidDay();
element.value = formatDate(inputYear, (inputMonth + 1), inputDate, format);
status = false;
hide();
}
var cssNotSelect = "padding:0px 0px 2px 5px; width:100%; color:#000; letter-spacing:2px; text-decoration:none;",
cssSelected = "background-color:#00006C;color:#fff;padding:0px 0px 2px 5px; width:100%; letter-spacing:2px; text-decoration:none;";
function showMore(starNum,endNum,selectedValue){
var obj = window.event.srcElement;
var selectedIndex = selectedValue - starNum;
divMore.style.height = 0;
divMore.style.top = calculateSumOffset(obj, "offsetTop") + obj.offsetHeight;
divMore.style.left = calculateSumOffset(obj, "offsetLeft");
divMore.selectedIndex = selectedIndex;
divMore.onclick = function() {
var selectedObj = window.event.srcElement;
if( "nobr" == selectedObj.tagName.toLowerCase() && divMore.contains(selectedObj)) {
var tmp = parseInt(selectedObj.innerHTML, 10);
if(parseInt(obj.innerHTML, 10) != tmp) {
if (tmp>12) {
obj.innerHTML = tmp;
currentYear = tmp;
} else {
obj.innerHTML = formatDate(0, tmp, 0, "mm");
currentMonth = tmp - 1;
}
showCurrentDate("");
}
}
}
divMore.onlosecapture = alert
var strHTML = "";
for(var i=starNum;i<=endNum;i++){
strHTML += "<nobr οnmοuseοver=/"this.parentNode.getElementsByTagName('nobr')[this.parentNode.selectedIndex].style.cssText='" + cssNotSelect + "';this.style.cssText='" + cssSelected + "'/" οnmοuseοut=/"this.style.cssText='" + cssNotSelect + "'/" style=/"" + cssNotSelect + "/">"+i+"</nobr><br>"
}
divMore.innerHTML = strHTML;
showBox(150);
}
function showBox(iHeight) {
divMore.style.height =1;
divMore.style.display = "block";
window.clearInterval(divMore.timeHandle);
divMore.timeHandle = window.setInterval(interValHandle,1);
var s = 0,t = 1;
function interValHandle() {
divMore.scrollTop = 1000000;
s = s + t*t;
t += 0.5;
divMore.style.height = parseInt(divMore.style.height) + Math.floor(s);
//divMore.style.width = 65 / iHeight * divMore.offsetHeight;
if( divMore.offsetHeight > iHeight ) {
window.clearInterval(divMore.timeHandle);
divMore.style.height = iHeight;
divMore.scrollTop = divMore.childNodes[0].offsetHeight * divMore.selectedIndex;
divMore.getElementsByTagName("nobr")[divMore.selectedIndex].style.cssText = cssSelected;
window.document.attachEvent("onclick",
divMore.hide = function() {
divMore.style.display = "none";
window.document.detachEvent("onclick", divMore.hide);
}
);
}
}
}
</script>
</public:component>
加工成自定义控件
InputCalendar.cs
using
System;
using System.ComponentModel;
using System.Drawing;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
[assembly: TagPrefix( " Jxmstc " , " Jxmstc " )]
namespace Jxmstc
{
[
DefaultProperty("Text"),
ToolboxData(@"<{0}:InputCalender
ID='iptCad'
runat='server'></{0}:InputCalender>")
]
/**//// <summary>
/// 日期输入控件,
/// </summary>
public class InputCalender : CompositeControl
{
private TextBox _textBox;
[
Bindable(true), Category("Appearance"), DefaultValue(""), Description("获取或设置文本框输入文本")
]
public string Text
{
get
{
EnsureChildControls();
return _textBox.Text;
}
set
{
EnsureChildControls();
_textBox.Text = value;
}
}
[
Bindable(true), Category("Appearance"), DefaultValue(""), Description("长度")
]
public int CssWidth
{
get { return (ViewState["Length"] != null ? (int)ViewState["Length"] : 100); }
set { ViewState["Length"] = value; }
}
[
Bindable(true), Category("Appearance"), DefaultValue(""), Description("最大输入长度")
]
public int MaxLength
{
get { return (ViewState["MaxLength"] != null ? (int)ViewState["MaxLength"] :10); }
set { ViewState["MaxLength"] = value; }
}
[
Bindable(true), Category("Appearance"), DefaultValue(""), Description("是否只读")
]
public bool ReadOnly
{
get { return (ViewState["ReadOnly"] != null ? (bool)ViewState["ReadOnly"] : false); }
set { ViewState["ReadOnly"] = value; }
}
[
Bindable(true), Category("Appearance"), DefaultValue(""), Description("脚本资源文件地址")
]
public string ScriptUrl
{
get { return (ViewState["ScriptUrl"] != null ? (string)ViewState["ScriptUrl"] :""); }
set { ViewState["ScriptUrl"] = value; }
}
public InputCalender()
{
//this.ScriptUrl = GetAppRootPath() + "Images/calendar.htc";
//Jxmstc.RootPath mypath = new RootPath();
}
protected override void CreateChildControls()
{
Controls.Clear();
_textBox = new TextBox();
_textBox.ID = "iptCad";
_textBox.ReadOnly = this.ReadOnly;
_textBox.MaxLength = this.MaxLength;
_textBox.Width = this.CssWidth;
if (this.ScriptUrl =="")
{
this.ScriptUrl = GetAppRootPath() +"Images/calendar.htc";
}
_textBox.Style.Add("behavior", "url(" + ScriptUrl + ")");
this.Controls.Add(_textBox);
}
protected override void Render(HtmlTextWriter writer)
{
AddAttributesToRender(writer);
_textBox.RenderControl(writer);
}
//<summary>
//获取网站根目录
//</summary>
//<returns></returns>
protected string GetAppRootPath()
{
try
{
string s = HttpContext.Current.Request.ApplicationPath;
//string s = "";
if (s != "/")
{
s += "/";
}
return s;
}
catch
{
return "";
}
}
}
}
using System.ComponentModel;
using System.Drawing;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
[assembly: TagPrefix( " Jxmstc " , " Jxmstc " )]
namespace Jxmstc
{
[
DefaultProperty("Text"),
ToolboxData(@"<{0}:InputCalender
ID='iptCad'
runat='server'></{0}:InputCalender>")
]
/**//// <summary>
/// 日期输入控件,
/// </summary>
public class InputCalender : CompositeControl
{
private TextBox _textBox;
[
Bindable(true), Category("Appearance"), DefaultValue(""), Description("获取或设置文本框输入文本")
]
public string Text
{
get
{
EnsureChildControls();
return _textBox.Text;
}
set
{
EnsureChildControls();
_textBox.Text = value;
}
}
[
Bindable(true), Category("Appearance"), DefaultValue(""), Description("长度")
]
public int CssWidth
{
get { return (ViewState["Length"] != null ? (int)ViewState["Length"] : 100); }
set { ViewState["Length"] = value; }
}
[
Bindable(true), Category("Appearance"), DefaultValue(""), Description("最大输入长度")
]
public int MaxLength
{
get { return (ViewState["MaxLength"] != null ? (int)ViewState["MaxLength"] :10); }
set { ViewState["MaxLength"] = value; }
}
[
Bindable(true), Category("Appearance"), DefaultValue(""), Description("是否只读")
]
public bool ReadOnly
{
get { return (ViewState["ReadOnly"] != null ? (bool)ViewState["ReadOnly"] : false); }
set { ViewState["ReadOnly"] = value; }
}
[
Bindable(true), Category("Appearance"), DefaultValue(""), Description("脚本资源文件地址")
]
public string ScriptUrl
{
get { return (ViewState["ScriptUrl"] != null ? (string)ViewState["ScriptUrl"] :""); }
set { ViewState["ScriptUrl"] = value; }
}
public InputCalender()
{
//this.ScriptUrl = GetAppRootPath() + "Images/calendar.htc";
//Jxmstc.RootPath mypath = new RootPath();
}
protected override void CreateChildControls()
{
Controls.Clear();
_textBox = new TextBox();
_textBox.ID = "iptCad";
_textBox.ReadOnly = this.ReadOnly;
_textBox.MaxLength = this.MaxLength;
_textBox.Width = this.CssWidth;
if (this.ScriptUrl =="")
{
this.ScriptUrl = GetAppRootPath() +"Images/calendar.htc";
}
_textBox.Style.Add("behavior", "url(" + ScriptUrl + ")");
this.Controls.Add(_textBox);
}
protected override void Render(HtmlTextWriter writer)
{
AddAttributesToRender(writer);
_textBox.RenderControl(writer);
}
//<summary>
//获取网站根目录
//</summary>
//<returns></returns>
protected string GetAppRootPath()
{
try
{
string s = HttpContext.Current.Request.ApplicationPath;
//string s = "";
if (s != "/")
{
s += "/";
}
return s;
}
catch
{
return "";
}
}
}
}
使用的时候,将calendar.htc放入网站根目录的Images中,同时在web.config中添加
<
globalization
requestEncoding
="GB2312"
responseEncoding
="GB2312"
/>
源码
/Files/longren629/InputCalender.rar