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("<tr>");
        for (i = 0; i < 7; i++)
            write("<td " + styleTD + " color:#000000‘ >" + WeekDay[i] + "</td>");
        write("</tr>");

        for (w = 1; w < 7; w++) {
            write("<tr>");
            for (d = 0; d < 7; d++) {
                write("<td id=calCell " + styleTD2 + "cursor:hand;‘ onMouseOver=‘this.bgColor=gcToggle‘ onMouseOut=‘this.bgColor=gcBG‘ onclick=‘fSetSelected(this)‘>");
                write("<font id=cellText ><b> </b></font>");
                write("</td>")
            }
            write("</tr>");
        }
    }
}

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.: <input type="text" name="dc" style="text-align:center" mce_style="text-align:center" readonly><INPUT type="button" value="V" onclick="fPopCalendar(dc,dc);return false">
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("<Div id=‘VicPopCal‘ style=‘OVERFLOW:hidden;POSITION:absolute;VISIBILITY:hidden;border:0px ridge;width:100%;height:100%;top:0;left:0;z-index:100;overflow:hidden‘>");
    write("<table bgcolor=‘" + BgColor + "‘ BORDER=3 CELLSPACING=3 CELLPADDING=%3>");
    write("<TR>");
    write("<td valign=‘middle‘ align=‘center‘><input type=‘button‘ name=‘PrevMonth‘ value=‘<‘ style=‘height:20;width:20;FONT:bold‘ onClick=‘fPrevMonth()‘>");
    write("&nbsp;<SELECT name=‘tbSelYear‘ onChange=‘fUpdateCal(tbSelYear.value, tbSelMonth.value)‘ Victor=‘Won‘>");
    for (i = 1949; i < 2020; i++)
        write("<OPTION value=‘" + i + "‘>" + i + "年</OPTION>");
    write("</SELECT>");
    write("&nbsp;<select name=‘tbSelMonth‘ onChange=‘fUpdateCal(tbSelYear.value, tbSelMonth.value)‘ Victor=‘Won‘>");
    for (i = 0; i < 12; i++)
        write("<option value=‘" + (i + 1) + "‘>" + gMonths[i] + "</option>");
    write("</SELECT>");
    write("&nbsp;<input type=‘button‘ name=‘PrevMonth‘ value=‘>‘ style=‘height:20;width:20;FONT:bold‘ onclick=‘fNextMonth()‘>");
    write("</td>");
    write("</TR><TR>");
    write("<td align=‘center‘>");
    write("<DIV‘><table width=‘100%‘ border=‘1‘ CELLSPACING=3 CELLPADDING=%3>");
    fDrawCal(giYear, giMonth, 8, ‘12‘);
    write("</table></DIV>");
    write("</td>");
    write("</TR><TR><TD align=‘center‘>");

    write("<TABLE width=‘100%‘><TR><TD align=‘center‘>");
    write("<font ID=/"CAL_B_BLANK/" style="color:" + gcFont + "; visibility:visible; cursor:hand; font-size:12px" mce_style="color:" + gcFont + "; visibility:visible; cursor:hand; font-size:12px" onMouseOver=‘this.style.color=gcToggle‘ onMouseOut=‘this.style.color=gcFont‘></font>");
    write("</td><td algin=‘center‘>");
    write("<font style="color:" + gcFont + ";cursor:hand; font-size:12px" mce_style="color:" + gcFont + ";cursor:hand; font-size:12px" onclick=‘fSetDate(giYear,giMonth,giDay)‘ onMouseOver=‘this.style.color=gcToggle‘ onMouseOut=‘this.style.color=gcFont‘>&nbsp;&nbsp;&nbsp;&nbsp;当前日期: " + giYear + "/" + giMonth + "/" + giDay + "</font>");
    write("</td></tr></table>");

    write("</TD></TR>");
    write("</TABLE></Div>");
}

Calendar.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body onload="fload()">
    <script src="calendar.js" type="text/javascript"></script>
    <script type="text/javascript">
        function fload() {
            var a = window.dialogArguments;
            fPopCalendar(document.all.txt1, document.all.txt1, a);
        }

        function fkeydown() {
            if (event.keyCode == 27) {
                event.returnValue = null;
                window.returnValue = null;
                window.close();
            }
        }
        document.onkeydown = fkeydown;

</script>
    <input id="txt1" style="display: none"/>
</body>
</html>

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function PopCalendar(obj) {
            showx = event.screenX - event.offsetX - 4 - 10; // + deltaX;
            showy = event.screenY - event.offsetY - 168; // + deltaY;
            newWINwidth = 210 + 4 + 18;
            window.showModalDialog("calendar.htm", obj, "dialogWidth:206px; dialogHeight:230px; dialogLeft:" + showx + "px; dialogTop:" + showy + "px; status:no; directories:yes;scrollbars:no;Resizable=no; ");
        }

</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        开始时间:<asp:TextBox ID="StartTime" runat="server" Width="80px" CssClass="textbox"
            Height="22px"></asp:TextBox>&nbsp;
        <input id="CalendarStart" onclick="PopCalendar(StartTime);return false;" tabindex="14"
            type="image" src="calendar.gif" align="absMiddle" />
    </div>
    </form>
</body>
</html>

效果如下:

时间: 2025-01-20 05:36:18

ASP.NET日期选择控件的相关文章

原创控件代码共享--日期选择控件

思路:实现日期年月日的选择 1.可以设定年的起止年份 2.排除不正确日期选择的可能 3.使用javascript实现控制 4.使用Text属性方便获取设置日期值 ================================= 代码如下: using System; using System.Collections; using System.Collections.Specialized; using System.ComponentModel; using System.IO; using

用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)

本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.android实现自绘日期选择控件 目的: 通过一个相对复杂的自定义自绘控件来分享: 1.ios以及android自定义自绘控件的开发流程 2.objc与c/c++混合编程 3.android ndk的环境配置,android studio ndk的编译模式,swig在android ndk开发中的作

双日历日期选择控件

近期,需要在项目里使用日历,经过多方选择,最后决定使用 daterangepicker  (http://www.daterangepicker.com),代码下载地址 https://github.com/dangrossman/bootstrap-daterangepicker 但是,该控件是一个日期范围选择控件,使用singleDatePicker 可以变成单日期选择控件,但是只显示一个日期. 看了一下源代码,主要是在 daterangepicker.js 的有一段代码,注释掉即可:如下

高仿IOS7日期选择控件

高仿IOS7日期选择控件 高仿IOS7.QQ等日期选择控件,滑动选择,高端大气上档次,可直接运用于项目中... 下载地址:http://www.devstore.cn/code/info/965.html 运行截图:   

Android自定义View(RollWeekView-炫酷的星期日期选择控件)

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义CustomWeekView 4重写onMeasure 5点击后执行动画 7重置预备控件 源码下载 ??最近收到一个自定义控件的需求,需要做一个日期选择控件,实现图如下: ???? ??一次展示一个星期的5天,中间放大的为当前选中的:如果点击了其中一个日期,比如星期五,那么整体向左滑动,并将星期五慢慢放大

ExtJS6.0扩展日期选择控件为也可以选择时间

PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6.0源代码中Picker文件路径下的Date.js脚本(路径:ext-6.0.0-gpl\ext-6.0.0\classic\classic\src\picker),拷贝一份出来命名为DateTimePicker.js 2.修改命名空间(把白色底的改成黑色底的命名空间以及别名,你也可以修改为自己存放该

Swift - 日期选择控件(UIDatePicker)的用法

1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同时在ViewController.swift中使用IBOutlet建立起控件和事件的关联,具体代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 class ViewContro

取消layUI中日期选择控件默认填充日期

input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效果, 最后发现可以在绑定时将value一项设置为空,而非new Data()的值, laydate.render({    elem: '#param_monthid',    type: 'month',    format: 'yyyyMM',    value: '',    max: year + &

ASP.NET文本框中添加日期选择控件

1.把文件夹拷贝到解决方案里面: 2.在前台页面添加对js文件的引用: <script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script> 3.在要使用日历控件的控件添加click事件:(WdatePicker 为主调函数 ) <asp:TextBox ID="TextBox3&