1顶

日期选择填写脚本

稿源：互联网 2022-04-15 23:45:14 点击： 2092 撤稿纠错

日期选择器，点下右边的按钮就弹出一个日期框，之后可以随便选择了。

以下讨论的是和脚本相关的日期选择填写脚本教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

要完成此效果需要两个步骤

第一步：把如下代码加入到<head>区域中

var weekend = [0,6];
var weekendColor = "#e0e0e0";
var fontface = "Verdana";
var fontsize = 2;

var gNow = new Date();
var ggWinCal;
isNav = (navigator.appName.indexOf("Netscape") != -1) ? true : false;
isIE = (navigator.appName.indexOf("Microsoft") != -1) ? true : false;

Calendar.Months = ["一月", "二月", "三月", "四月", "五月", "六月",
"七月", "八月", "九月", "十月", "十一月", "十二月"];

// Non-Leap year Month days..
Calendar.DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// Leap year Month days..
Calendar.lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

function Calendar(p_item, p_WinCal, p_month, p_year, p_format) {
    if ((p_month == null) && (p_year == null))    return;

if (p_WinCal == null)
        this.gWinCal = ggWinCal;
    else
        this.gWinCal = p_WinCal;
    
    if (p_month == null) {
        this.gMonthName = null;
        this.gMonth = null;
        this.gYearly = true;
    } else {
        this.gMonthName = Calendar.get_month(p_month);
        this.gMonth = new Number(p_month);
        this.gYearly = false;
    }

this.gYear = p_year;
    this.gFormat = p_format;
    this.gBGColor = "white";
    this.gFGColor = "black";
    this.gTextColor = "black";
    this.gHeaderColor = "black";
    this.gReturnItem = p_item;
}

Calendar.get_month = Calendar_get_month;
Calendar.get_daysofmonth = Calendar_get_daysofmonth;
Calendar.calc_month_year = Calendar_calc_month_year;
Calendar.print = Calendar_print;

function Calendar_get_month(monthNo) {
    return Calendar.Months[monthNo];
}

function Calendar_get_daysofmonth(monthNo, p_year) {
    /* 
    Check for leap year ..
    1.Years evenly divisible by four are normally leap years, except for... 
    2.Years also evenly divisible by 100 are not leap years, except for... 
    3.Years also evenly divisible by 400 are leap years. 
    */
    if ((p_year % 4) == 0) {
        if ((p_year % 100) == 0 && (p_year % 400) != 0)
            return Calendar.DOMonth[monthNo];
    
        return Calendar.lDOMonth[monthNo];
    } else
        return Calendar.DOMonth[monthNo];
}

function Calendar_print() {
    ggWinCal.print();
}

// This is for compatibility with Navigator 3, we have to create and discard one object before the prototype object exists.
new Calendar();

Calendar.prototype.getMonthlyCalendarCode = function() {
    var vCode = "";
    var vHeader_Code = "";
    var vData_Code = "";
    
    // Begin Table Drawing code here..
    vCode = vCode + "<TABLE BORDER=1 BGCOLOR="" + this.gBGColor + "">";
    
    vHeader_Code = this.cal_header();
    vData_Code = this.cal_data();
    vCode = vCode + vHeader_Code + vData_Code;
    
    vCode = vCode + "</TABLE>";
    
    return vCode;
}

Calendar.prototype.show = function() {
    var vCode = "";
    
    this.gWinCal.document.open();

// Setup the page...
    this.wwrite("<html>");
    this.wwrite("<head><title>Typhoon Start JavaScript Fairyland</title>");
    this.wwrite("</head>");

this.wwrite("<body " + 
        "link="" + this.gLinkColor + "" " + 
        "vlink="" + this.gLinkColor + "" " +
        "alink="" + this.gLinkColor + "" " +
        "text="" + this.gTextColor + "">");
    this.wwriteA("<FONT FACE='" + fontface + "' SIZE=2><B>");
    this.wwriteA(this.gMonthName + " " + this.gYear);
    this.wwriteA("</B><BR>");

// Show navigation buttons
    var prevMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, -1);
    var prevMM = prevMMYYYY[0];
    var prevYYYY = prevMMYYYY[1];

var nextMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, 1);
    var nextMM = nextMMYYYY[0];
    var nextYYYY = nextMMYYYY[1];
    
    this.wwrite("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0'><TR><TD ALIGN=center>");
    this.wwrite("[<A HREF="" +
        "javascript:window.opener.Build(" + 
        "'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)-1) + "', '" + this.gFormat + "'" +
        ");" +
        ""><<</A>]</TD><TD ALIGN=center>");
    this.wwrite("[<A HREF="" +
        "javascript:window.opener.Build(" + 
        "'" + this.gReturnItem + "', '" + prevMM + "', '" + prevYYYY + "', '" + this.gFormat + "'" +
        ");" +
        ""><</A>]</TD><TD ALIGN=center>");
    this.wwrite("[<A HREF="javascript:window.print();">打印</A>]</TD><TD ALIGN=center>");
    this.wwrite("[<A HREF="" +
        "javascript:window.opener.Build(" + 
        "'" + this.gReturnItem + "', '" + nextMM + "', '" + nextYYYY + "', '" + this.gFormat + "'" +
        ");" +
        "">></A>]</TD><TD ALIGN=center>");
    this.wwrite("[<A HREF="" +
        "javascript:window.opener.Build(" + 
        "'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)+1) + "', '" + this.gFormat + "'" +
        ");" +
        "">>></A>]</TD></TR></TABLE><BR>");

// Get the complete calendar code for the month..
    vCode = this.getMonthlyCalendarCode();
    this.wwrite(vCode);

this.wwrite("</font></body></html>");
    this.gWinCal.document.close();
}

Calendar.prototype.showY = function() {
    var vCode = "";
    var i;
    var vr, vc, vx, vy;        // Row, Column, X-coord, Y-coord
    var vxf = 285;            // X-Factor
    var vyf = 200;            // Y-Factor
    var vxm = 10;            // X-margin
    var vym;                // Y-margin
    if (isIE)    vym = 75;
    else if (isNav)    vym = 25;
    
    this.gWinCal.document.open();

this.wwrite("<html>");
    this.wwrite("<head><title>Calendar</title>");
    this.wwrite("<style type='text/css'>n<!--");
    for (i=0; i<12; i++) {
        vc = i % 3;
        if (i>=0 && i<= 2)    vr = 0;
        if (i>=3 && i<= 5)    vr = 1;
        if (i>=6 && i<= 8)    vr = 2;
        if (i>=9 && i<= 11)    vr = 3;
        
        vx = parseInt(vxf * vc) + vxm;
        vy = parseInt(vyf * vr) + vym;

this.wwrite(".lclass" + i + " {position:absolute;top:" + vy + ";left:" + vx + ";}");
    }
    this.wwrite("-->n</style>");
    this.wwrite("</head>");

this.wwrite("<body " + 
        "link="" + this.gLinkColor + "" " + 
        "vlink="" + this.gLinkColor + "" " +
        "alink="" + this.gLinkColor + "" " +
        "text="" + this.gTextColor + "">");
    this.wwrite("<FONT FACE='" + fontface + "' SIZE=2><B>");
    this.wwrite("Year : " + this.gYear);
    this.wwrite("</B><BR>");

// Show navigation buttons
    var prevYYYY = parseInt(this.gYear) - 1;
    var nextYYYY = parseInt(this.gYear) + 1;
    
    this.wwrite("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0'><TR><TD ALIGN=center>");
    this.wwrite("[<A HREF="" +
        "javascript:window.opener.Build(" + 
        "'" + this.gReturnItem + "', null, '" + prevYYYY + "', '" + this.gFormat + "'" +
        ");" +
        "" alt='Prev Year'><<</A>]</TD><TD ALIGN=center>");
    this.wwrite("[<A HREF="javascript:window.print();">打印</A>]</TD><TD ALIGN=center>");
    this.wwrite("[<A HREF="" +
        "javascript:window.opener.Build(" + 
        "'" + this.gReturnItem + "', null, '" + nextYYYY + "', '" + this.gFormat + "'" +
        ");" +
        "">>></A>]</TD></TR></TABLE><BR>");

// Get the complete calendar code for each month..
    var j;
    for (i=11; i>=0; i--) {
        if (isIE)
            this.wwrite("<DIV ID="layer" + i + "" CLASS="lclass" + i + "">");
        else if (isNav)
            this.wwrite("<LAYER ID="layer" + i + "" CLASS="lclass" + i + "">");

this.gMonth = i;
        this.gMonthName = Calendar.get_month(this.gMonth);
        vCode = this.getMonthlyCalendarCode();
        this.wwrite(this.gMonthName + "/" + this.gYear + "<BR>");
        this.wwrite(vCode);

if (isIE)
            this.wwrite("</DIV>");
        else if (isNav)
            this.wwrite("</LAYER>");
    }

this.wwrite("</font><BR></body></html>");
    this.gWinCal.document.close();
}

Calendar.prototype.wwrite = function(wtext) {
    this.gWinCal.document.writeln(wtext);
}

Calendar.prototype.wwriteA = function(wtext) {
    this.gWinCal.document.write(wtext);
}

Calendar.prototype.cal_header = function() {
    var vCode = "";
    
    vCode = vCode + "<TR>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>日</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>一</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>二</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>三</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>四</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>五</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='16%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>六</B></FONT></TD>";
    vCode = vCode + "</TR>";
    
    return vCode;
}

Calendar.prototype.cal_data = function() {
    var vDate = new Date();
    vDate.setDate(1);
    vDate.setMonth(this.gMonth);
    vDate.setFullYear(this.gYear);

var vFirstDay=vDate.getDay();
    var vDay=1;
    var vLastDay=Calendar.get_daysofmonth(this.gMonth, this.gYear);
    var vOnLastDay=0;
    var vCode = "";

/*
    Get day for the 1st of the requested month/year..
    Place as many blank cells before the 1st day of the month as necessary. 
    */

vCode = vCode + "<TR>";
    for (i=0; i<vFirstDay; i++) {
        vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(i) + "><FONT SIZE='2' FACE='" + fontface + "'> </FONT></TD>";
    }

// Write rest of the 1st week
    for (j=vFirstDay; j<7; j++) {
        vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT SIZE='2' FACE='" + fontface + "'>" + 
            "<A HREF='#' " + 
                "onClick="self.opener.document." + this.gReturnItem + ".value='" + 
                this.format_data(vDay) + 
                "';window.close();">" + 
                this.format_day(vDay) + 
            "</A>" + 
            "</FONT></TD>";
        vDay=vDay + 1;
    }
    vCode = vCode + "</TR>";

// Write the rest of the weeks
    for (k=2; k<7; k++) {
        vCode = vCode + "<TR>";

for (j=0; j<7; j++) {
            vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT SIZE='2' FACE='" + fontface + "'>" + 
                "<A HREF='#' " + 
                    "onClick="self.opener.document." + this.gReturnItem + ".value='" + 
                    this.format_data(vDay) + 
                    "';window.close();">" + 
                this.format_day(vDay) + 
                "</A>" + 
                "</FONT></TD>";
            vDay=vDay + 1;

if (vDay > vLastDay) {
                vOnLastDay = 1;
                break;
            }
        }

if (j == 6)
            vCode = vCode + "</TR>";
        if (vOnLastDay == 1)
            break;
    }
    
    // Fill up the rest of last week with proper blanks, so that we get proper square blocks
    for (m=1; m<(7-j); m++) {
        if (this.gYearly)
            vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) + 
            "><FONT SIZE='2' FACE='" + fontface + "' COLOR='gray'> </FONT></TD>";
        else
            vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) + 
            "><FONT SIZE='2' FACE='" + fontface + "' COLOR='gray'>" + m + "</FONT></TD>";
    }
    
    return vCode;
}

Calendar.prototype.format_day = function(vday) {
    var vNowDay = gNow.getDate();
    var vNowMonth = gNow.getMonth();
    var vNowYear = gNow.getFullYear();

if (vday == vNowDay && this.gMonth == vNowMonth && this.gYear == vNowYear)
        return ("<FONT COLOR="RED"><B>" + vday + "</B></FONT>");
    else
        return (vday);
}

Calendar.prototype.write_weekend_string = function(vday) {
    var i;

// Return special formatting for the weekend day.
    for (i=0; i<weekend.length; i++) {
        if (vday == weekend[i])
            return (" BGCOLOR="" + weekendColor + """);
    }
    
    return "";
}

Calendar.prototype.format_data = function(p_day) {
    var vData;
    var vMonth = 1 + this.gMonth;
    vMonth = (vMonth.toString().length < 2) ? "0" + vMonth : vMonth;
    var vMon = Calendar.get_month(this.gMonth).substr(0,3).toUpperCase();
    var vFMon = Calendar.get_month(this.gMonth).toUpperCase();
    var vY4 = new String(this.gYear);
    var vY2 = new String(this.gYear.substr(2,2));
    var vDD = (p_day.toString().length < 2) ? "0" + p_day : p_day;

switch (this.gFormat) {
        case "MM/DD/YYYY" :
            vData = vMonth + "/" + vDD + "/" + vY4;
            break;
        case "MM/DD/YY" :
            vData = vMonth + "/" + vDD + "/" + vY2;
            break;
        case "MM-DD-YYYY" :
            vData = vMonth + "-" + vDD + "-" + vY4;
            break;
        case "MM-DD-YY" :
            vData = vMonth + "-" + vDD + "-" + vY2;
            break;

case "DD/MON/YYYY" :
            vData = vDD + "/" + vMon + "/" + vY4;
            break;
        case "DD/MON/YY" :
            vData = vDD + "/" + vMon + "/" + vY2;
            break;
        case "DD-MON-YYYY" :
            vData = vDD + "-" + vMon + "-" + vY4;
            break;
        case "DD-MON-YY" :
            vData = vDD + "-" + vMon + "-" + vY2;
            break;

case "DD/MONTH/YYYY" :
            vData = vDD + "/" + vFMon + "/" + vY4;
            break;
        case "DD/MONTH/YY" :
            vData = vDD + "/" + vFMon + "/" + vY2;
            break;
        case "DD-MONTH-YYYY" :
            vData = vDD + "-" + vFMon + "-" + vY4;
            break;
        case "DD-MONTH-YY" :
            vData = vDD + "-" + vFMon + "-" + vY2;
            break;

case "DD/MM/YYYY" :
            vData = vDD + "/" + vMonth + "/" + vY4;
            break;
        case "DD/MM/YY" :
            vData = vDD + "/" + vMonth + "/" + vY2;
            break;
        case "DD-MM-YYYY" :
            vData = vDD + "-" + vMonth + "-" + vY4;
            break;
        case "DD-MM-YY" :
            vData = vDD + "-" + vMonth + "-" + vY2;
            break;

default :
            vData = vMonth + "/" + vDD + "/" + vY4;
    }

return vData;
}

function Build(p_item, p_month, p_year, p_format) {
    var p_WinCal = ggWinCal;
    gCal = new Calendar(p_item, p_WinCal, p_month, p_year, p_format);

// Customize your Calendar here..
    gCal.gBGColor="white";
    gCal.gLinkColor="black";
    gCal.gTextColor="black";
    gCal.gHeaderColor="darkgreen";

// Choose appropriate show function
    if (gCal.gYearly)    gCal.showY();
    else    gCal.show();
}

function show_calendar() {
    /* 
        p_month : 0-11 for Jan-Dec; 12 for All Months.
        p_year    : 4-digit year
        p_format: Date format (mm/dd/yyyy, dd/mm/yy, ...)
        p_item    : Return Item.
    */

p_item = arguments[0];
    if (arguments[1] == null)
        p_month = new String(gNow.getMonth());
    else
        p_month = arguments[1];
    if (arguments[2] == "" || arguments[2] == null)
        p_year = new String(gNow.getFullYear().toString());
    else
        p_year = arguments[2];
    if (arguments[3] == null)
        p_format = "MM/DD/YYYY";
    else
        p_format = arguments[3];

vWinCal = window.open("", "Calendar", 
        "width=250,height=250,status=no,resizable=no,top=200,left=200");
    vWinCal.opener = self;
    ggWinCal = vWinCal;

Build(p_item, p_month, p_year, p_format);
}
/*
Yearly Calendar Code Starts here
*/
function show_yearly_calendar(p_item, p_year, p_format) {
    // Load the defaults..
    if (p_year == null || p_year == "")
        p_year = new String(gNow.getFullYear().toString());
    if (p_format == null || p_format == "")
        p_format = "MM/DD/YYYY";

var vWinCal = window.open("", "Calendar", "scrollbars=yes");
    vWinCal.opener = self;
    ggWinCal = vWinCal;

Build(p_item, null, p_year, p_format);
}

</script>

第二步：把如下代码加入到<body>区域中

<center>
<form name=calform>
<input type=text name="datebox" size=15>
    <a href="javascript:show_calendar('calform.datebox');" onmouseover="window.status='Date Picker';return true;" onmouseout="window.status='';return true;"><img src="http://www.alixixi.com/UploadPic/userface/no1323.jpg" width=24 height=22 border=0></a> 
  </form>
</center>
<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于日期选择填写脚本的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20080814658.shtml方便下次再访问哦。

·上一篇： 超酷时钟
·下一篇： 时间提示脚本

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

日期选择填写脚本

文章分类LIST >>返回首页

最新游戏

最新新闻