`
永恒的三号
  • 浏览: 44857 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

日历代码一

prototypeSUNCacheHTMLJavaScript 
阅读更多

输入框中自动生成日历，采用JS技术。

function Calendar(beginYear, endYear, language, patternDelimiter, date2StringPattern, string2DatePattern) {   
    this.beginYear = beginYear || 1980;   
    this.endYear   = endYear   || 2020;   
    this.language  = language  || 0;   
    this.patternDelimiter = patternDelimiter     || "-";   
    this.date2StringPattern = date2StringPattern || Calendar.language["date2StringPattern"][this.language].replace(/\-/g, this.patternDelimiter);   
    this.string2DatePattern = string2DatePattern || Calendar.language["string2DatePattern"][this.language];   
       
    this.dateControl = null;   
    this.panel  = this.getElementById("__calendarPanel");   
    this.iframe = window.frames["__calendarIframe"];   
    this.form   = null;   
       
    this.date = new Date();   
    this.year = this.date.getFullYear();   
    this.month = this.date.getMonth();   
       
    this.colors = {"bg_cur_day":"#00CC33","bg_over":"#EFEFEF","bg_out":"#FFCC00"}   
};   
  
Calendar.language = {   
    "year"   : ["\u5e74", "", "", "\u5e74"],   
    "months" : [   
                ["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"],   
                ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],   
                ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],   
                ["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"]   
                ],   
    "weeks"  : [["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"],   
                ["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],   
                ["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],   
                ["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"]   
        ],   
    "clear"  : ["\u6e05\u7a7a", "Clear", "Clear", "\u6e05\u7a7a"],   
    "today"  : ["\u4eca\u5929", "Today", "Today", "\u4eca\u5929"],   
    "close"  : ["\u5173\u95ed", "Close", "Close", "\u95dc\u9589"],   
    "date2StringPattern" : ["yyyy-MM-dd", "yyyy-MM-dd", "yyyy-MM-dd", "yyyy-MM-dd"],   
    "string2DatePattern" : ["ymd","ymd", "ymd", "ymd"]   
};   
  
Calendar.prototype.draw = function() {   
    calendar = this;   
       
    var _cs = [];   
    _cs[_cs.length] = '<form id="__calendarForm" name="__calendarForm" method="post">';   
    _cs[_cs.length] = '<table id="__calendarTable" width="100%" border="0" cellpadding="3" cellspacing="1" align="center">';   
    _cs[_cs.length] = ' <tr>';   
    _cs[_cs.length] = '  <th><input class="l" name="goPrevMonthButton" type="button" id="goPrevMonthButton" value="&lt;" \/><\/th>';   
    _cs[_cs.length] = '  <th colspan="5"><select class="year" name="yearSelect" id="yearSelect"><\/select><select class="month" name="monthSelect" id="monthSelect"><\/select><\/th>';   
    _cs[_cs.length] = '  <th><input class="r" name="goNextMonthButton" type="button" id="goNextMonthButton" value="&gt;" \/><\/th>';   
    _cs[_cs.length] = ' <\/tr>';   
    _cs[_cs.length] = ' <tr>';   
    for(var i = 0; i < 7; i++) {   
        _cs[_cs.length] = '<th class="theader">';   
        _cs[_cs.length] = Calendar.language["weeks"][this.language][i];   
        _cs[_cs.length] = '<\/th>';      
    }   
    _cs[_cs.length] = '<\/tr>';   
    for(var i = 0; i < 6; i++){   
        _cs[_cs.length] = '<tr align="center">';   
        for(var j = 0; j < 7; j++) {   
            switch (j) {   
                case 0: _cs[_cs.length] = '<td class="sun">&nbsp;<\/td>'; break;   
                case 6: _cs[_cs.length] = '<td class="sat">&nbsp;<\/td>'; break;   
                default:_cs[_cs.length] = '<td class="normal">&nbsp;<\/td>'; break;   
            }   
        }   
        _cs[_cs.length] = '<\/tr>';   
    }   
    _cs[_cs.length] = ' <tr>';   
    _cs[_cs.length] = '  <th colspan="2"><input type="button" class="b" name="clearButton" id="clearButton" \/><\/th>';   
    _cs[_cs.length] = '  <th colspan="3"><input type="button" class="b" name="selectTodayButton" id="selectTodayButton" \/><\/th>';   
    _cs[_cs.length] = '  <th colspan="2"><input type="button" class="b" name="closeButton" id="closeButton" \/><\/th>';   
    _cs[_cs.length] = ' <\/tr>';   
    _cs[_cs.length] = '<\/table>';   
    _cs[_cs.length] = '<\/form>';   
       
    this.iframe.document.body.innerHTML = _cs.join("");   
    this.form = this.iframe.document.forms["__calendarForm"];   
  
    this.form.clearButton.value = Calendar.language["clear"][this.language];   
    this.form.selectTodayButton.value = Calendar.language["today"][this.language];   
    this.form.closeButton.value = Calendar.language["close"][this.language];   
       
    this.form.goPrevMonthButton.onclick = function () {calendar.goPrevMonth(this);}   
    this.form.goNextMonthButton.onclick = function () {calendar.goNextMonth(this);}   
    this.form.yearSelect.onchange = function () {calendar.update(this);}   
    this.form.monthSelect.onchange = function () {calendar.update(this);}   
       
    this.form.clearButton.onclick = function () {calendar.dateControl.value = "";calendar.hide();}   
    this.form.closeButton.onclick = function () {calendar.hide();}   
    this.form.selectTodayButton.onclick = function () {   
        var today = new Date();   
        calendar.date = today;   
        calendar.year = today.getFullYear();   
        calendar.month = today.getMonth();   
        calendar.dateControl.value = today.format(calendar.date2StringPattern);   
        calendar.hide();   
    }   
};   
  
Calendar.prototype.bindYear = function() {   
    var ys = this.form.yearSelect;   
    ys.length = 0;   
    for (var i = this.beginYear; i <= this.endYear; i++){   
        ys.options[ys.length] = new Option(i + Calendar.language["year"][this.language], i);   
    }   
};   
  
Calendar.prototype.bindMonth = function() {   
    var ms = this.form.monthSelect;   
    ms.length = 0;   
    for (var i = 0; i < 12; i++){   
        ms.options[ms.length] = new Option(Calendar.language["months"][this.language][i], i);   
    }   
};   
  
Calendar.prototype.goPrevMonth = function(e){   
    if (this.year == this.beginYear && this.month == 0){return;}   
    this.month--;   
    if (this.month == -1) {   
        this.year--;   
        this.month = 11;   
    }   
    this.date = new Date(this.year, this.month, 1);   
    this.changeSelect();   
    this.bindData();   
};   
  
Calendar.prototype.goNextMonth = function(e){   
    if (this.year == this.endYear && this.month == 11){return;}   
    this.month++;   
    if (this.month == 12) {   
        this.year++;   
        this.month = 0;   
    }   
    this.date = new Date(this.year, this.month, 1);   
    this.changeSelect();   
    this.bindData();   
};   
  
Calendar.prototype.changeSelect = function() {   
    var ys = this.form.yearSelect;   
    var ms = this.form.monthSelect;   
    for (var i= 0; i < ys.length; i++){   
        if (ys.options[i].value == this.date.getFullYear()){   
            ys[i].selected = true;   
            break;   
        }   
    }   
    for (var i= 0; i < ms.length; i++){   
        if (ms.options[i].value == this.date.getMonth()){   
            ms[i].selected = true;   
            break;   
        }   
    }   
};   
  
Calendar.prototype.update = function (e){   
    this.year  = e.form.yearSelect.options[e.form.yearSelect.selectedIndex].value;   
    this.month = e.form.monthSelect.options[e.form.monthSelect.selectedIndex].value;   
    this.date = new Date(this.year, this.month, 1);   
    this.changeSelect();   
    this.bindData();   
};   
  
Calendar.prototype.bindData = function () {   
    var calendar = this;   
    var dateArray = this.getMonthViewDateArray(this.date.getFullYear(), this.date.getMonth());   
    var tds = this.getElementsByTagName("td", this.getElementById("__calendarTable", this.iframe.document));   
    for(var i = 0; i < tds.length; i++) {   
        tds[i].style.backgroundColor = calendar.colors["bg_over"];   
        tds[i].onclick = null;   
        tds[i].onmouseover = null;   
        tds[i].onmouseout = null;   
        tds[i].innerHTML = dateArray[i] || "&nbsp;";   
        if (i > dateArray.length - 1) continue;   
        if (dateArray[i]){   
            tds[i].onclick = function () {   
                if (calendar.dateControl){   
                    calendar.dateControl.value = new Date(calendar.date.getFullYear(),   
                                                        calendar.date.getMonth(),   
                                                        this.innerHTML).format(calendar.date2StringPattern);   
                }   
                calendar.hide();   
            }   
            tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}   
            tds[i].onmouseout  = function () {this.style.backgroundColor = calendar.colors["bg_over"];}   
            var today = new Date();   
            if (today.getFullYear() == calendar.date.getFullYear()) {   
                if (today.getMonth() == calendar.date.getMonth()) {   
                    if (today.getDate() == dateArray[i]) {   
                        tds[i].style.backgroundColor = calendar.colors["bg_cur_day"];   
                        tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}   
                        tds[i].onmouseout  = function () {this.style.backgroundColor = calendar.colors["bg_cur_day"];}   
                    }   
                }   
            }   
        }//end if   
    }//end for   
};   
  
Calendar.prototype.getMonthViewDateArray = function (y, m) {   
    var dateArray = new Array(42);   
    var dayOfFirstDate = new Date(y, m, 1).getDay();   
    var dateCountOfMonth = new Date(y, m + 1, 0).getDate();   
    for (var i = 0; i < dateCountOfMonth; i++) {   
        dateArray[i + dayOfFirstDate] = i + 1;   
    }   
    return dateArray;   
};   
  
Calendar.prototype.show = function (dateControl, popuControl) {   
    if (this.panel.style.visibility == "visible") {   
        this.panel.style.visibility = "hidden";   
    }   
    if (!dateControl){   
        throw new Error("arguments[0] is necessary!")   
    }   
    this.dateControl = dateControl;   
    popuControl = popuControl || dateControl;   
  
    this.draw();   
    this.bindYear();   
    this.bindMonth();   
    if (dateControl.value.length > 0){   
        this.date  = new Date(dateControl.value.toDate(this.patternDelimiter, this.string2DatePattern));   
        this.year  = this.date.getFullYear();   
        this.month = this.date.getMonth();   
    }   
    this.changeSelect();   
    this.bindData();   
  
    var xy = this.getAbsPoint(popuControl);   
    this.panel.style.left = xy.x + "px";   
    this.panel.style.top = (xy.y + dateControl.offsetHeight) + "px";   
    this.panel.style.visibility = "visible";   
};   
  
Calendar.prototype.hide = function() {   
    this.panel.style.visibility = "hidden";   
};   
  
Calendar.prototype.getElementById = function(id, object){   
    object = object || document;   
    return document.getElementById ? object.getElementById(id) : document.all(id);   
};   
  
Calendar.prototype.getElementsByTagName = function(tagName, object){   
    object = object || document;   
    return document.getElementsByTagName ? object.getElementsByTagName(tagName) : document.all.tags(tagName);   
};   
  
Calendar.prototype.getAbsPoint = function (e){   
    var x = e.offsetLeft;   
    var y = e.offsetTop;   
    while(e = e.offsetParent){   
        x += e.offsetLeft;   
        y += e.offsetTop;   
    }   
    return {"x": x, "y": y};   
};   
  
Date.prototype.format = function(style) {   
    var o = {   
        "M+" : this.getMonth() + 1, //month   
        "d+" : this.getDate(),      //day   
        "h+" : this.getHours(),     //hour   
        "m+" : this.getMinutes(),   //minute   
        "s+" : this.getSeconds(),   //second   
        "w+" : "\u65e5\u4e00\u4e8c\u4e09\u56db\u4e94\u516d".charAt(this.getDay()),   //week   
        "q+" : Math.floor((this.getMonth() + 3) / 3),  //quarter   
        "S"  : this.getMilliseconds() //millisecond   
    }   
    if (/(y+)/.test(style)) {   
        style = style.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));   
    }   
    for(var k in o){   
        if (new RegExp("("+ k +")").test(style)){   
            style = style.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));   
        }   
    }   
    return style;   
};   
  
String.prototype.toDate = function(delimiter, pattern) {   
    delimiter = delimiter || "-";   
    pattern = pattern || "ymd";   
    var a = this.split(delimiter);   
    var y = parseInt(a[pattern.indexOf("y")]);   
    if(y.toString().length <= 2) y += 2000;   
    if(isNaN(y)) y = new Date().getFullYear();   
    var m = parseInt(a[pattern.indexOf("m")], 10) - 1;   
    var d = parseInt(a[pattern.indexOf("d")], 10);   
    if(isNaN(d)) d = 1;   
    return new Date(y, m, d);   
};   
  
document.writeln('<div id="__calendarPanel" style="position:absolute;visibility:hidden;z-index:9999;background-color:#FFFFFF;border:1px solid #aaaaaa;width:200px;height:216px;">');   
document.writeln('<iframe name="__calendarIframe" id="__calendarIframe" width="100%" height="100%" scrolling="no" frameborder="0" style="margin:0px;"><\/iframe>');   
var __ci = window.frames['__calendarIframe'];   
__ci.document.writeln('<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">');   
__ci.document.writeln('<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');   
__ci.document.writeln('<head>');   
__ci.document.writeln('<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>');   
__ci.document.writeln('<title>Web Calendar(UTF-8) Written By KimSoft<\/title>');   
__ci.document.writeln('<style type="text\/css">');   
__ci.document.writeln('<!--');   
__ci.document.writeln('body {font-size:12px;margin:0px;text-align:center;}');   
__ci.document.writeln('form {margin:0px;}');   
__ci.document.writeln('select {font-size:12px;background-color:#EFEFEF;}');   
__ci.document.writeln('table {border:0px solid #CCCCCC;background-color:#FFFFFF}');   
__ci.document.writeln('th {font-size:12px;font-weight:normal;background-color:#FFFFFF;}');   
__ci.document.writeln('th.theader {font-weight:normal;background-color:#aaaaaa;color:#FFFFFF;width:24px;}');   
__ci.document.writeln('select.year {width:64px;}');   
__ci.document.writeln('select.month {width:60px;}');   
__ci.document.writeln('td {font-size:12px;text-align:center;}');   
__ci.document.writeln('td.sat {color:#0000FF;background-color:#EFEFEF;}');   
__ci.document.writeln('td.sun {color:#FF0000;background-color:#EFEFEF;}');   
__ci.document.writeln('td.normal {background-color:#EFEFEF;}');   
__ci.document.writeln('input.l {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');   
__ci.document.writeln('input.r {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');   
__ci.document.writeln('input.b {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:100%;height:20px;}');   
__ci.document.writeln('-->');   
__ci.document.writeln('<\/style>');   
__ci.document.writeln('<\/head>');   
__ci.document.writeln('<body>');   
__ci.document.writeln('<\/body>');   
__ci.document.writeln('<\/html>');   
__ci.document.close();   
document.writeln('<\/div>');   
var calendar = new Calendar();

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
       
    <title>日历</title>  
       
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">       
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
       
    <script type="text/javascript" src="calendar1.js"></script>  
       
  </head>  
     
  <body>  
    <input type="text" onclick="new Calendar().show(this);" />  
  </body>  
</html>

日历效果

分享到：
| Spring面试必问
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    日历代码 显示日历的代码

    日历代码 显示日历的代码 日历代码 显示日历的代码

    小程序源码 电影日历 (代码+截图)

    小程序源码 电影日历 (代码+截图)小程序源码 电影日历 (代码+截图)小程序源码 电影日历 (代码+截图)小程序源码 电影日历 (代码+截图)小程序源码 电影日历 (代码+截图)小程序源码 电影日历 (代码+截图)小程序源码 ...

    小日历代码（可以嵌套到网页中）

    小日历代码是一种常见的网页元素，它允许用户在网页中查看日期并进行简单的日程管理。这个压缩包中包含了一个小日历的实现，由图片和一个HTML页面组成，为开发者提供了一种嵌入到网站中的实用工具。下面将详细解释这...

    简洁的jQuery日历代码.zip

    本资源"简洁的jQuery日历代码"提供了一种实现日历功能的方法，这对于网页开发中的日期选择或者日程管理是非常实用的。下面将详细介绍这个jQuery日历代码的核心知识点。 首先，jQuery日历的基本结构基于HTML、CSS和...

    HTML日历源代码

    HTML日历源代码是网页开发中的一个重要组成部分，它主要用于在网站上展示日期和时间信息，或者作为用户输入日期的交互式界面。HTML日历通常结合CSS（层叠样式表）和JavaScript来实现其视觉效果和动态功能。在这个...

    JS 实现活动日历代码

    接下来，我们需要编写JS代码来动态生成日历，并处理鼠标悬停事件。这里我们使用`calendar.js` 文件来实现这个功能。 1. 获取当前月份和年份，并创建日历表格。 ```javascript // 获取当前日期 var today = new ...

    JSP日历控件代码

    **JSP日历控件代码详解** 在网页开发中，日期选择控件是常见的功能之一，JSP（JavaServer Pages）作为服务器端脚本语言，提供了丰富的功能来创建动态网页。本篇将深入探讨如何在JSP中实现日历控件，并基于提供的...

    用excel vba写的日历代码

    用excel vba写的日历部分代码如下 Private Sub Calendar(ByVal iyear, ByVal imonth) For icol = 1 To 7 For irow = 3 To 8 Cells(irow, icol) = "" Next Next iday = DateSerial(iyear, imonth, 1) '取得...

    c语言日历代码

    日历代码

    精美日历代码，原代码

    【精美日历代码详解】 日历是我们日常生活中不可或缺的一个工具，无论是用于规划工作还是记录重要日期，它都扮演着重要角色。在IT行业中，创建一个功能完善的精美日历不仅可以提升用户体验，也是展示编程技巧的好...

    WEB手机端万年历日历代码

    以上就是围绕"WEB手机端万年历日历代码"这一主题的关键技术点。在实际开发中，开发者会结合JavaScript库（如jQuery）、框架（如React或Vue.js）以及CSS预处理器（如Sass或Less）来进一步提升开发效率和应用性能。

    Jquery 日历代码 可选年月

    而“Jquery 日历代码 可选年月”指的是使用jQuery构建的一个日历插件，它允许用户选择特定的年份和月份。这种功能在网页应用中非常常见，例如用于日程安排、日期输入或时间跟踪等场景。 首先，这个日历插件的核心是...

    javaweb日历代码(简洁可用)

    本资源提供了一个名为WebCalendar的简洁可用的日历代码，适用于快速集成到你的项目中。下面将详细介绍这个日历组件及其使用方法。 一、日历组件介绍 WebCalendar是一个基于HTML、CSS和JavaScript构建的轻量级日历...

    JQuery日历代码

    而"JQuery日历代码"通常指的是使用jQuery库来实现的一种交互式日历组件。这种组件常用于网站中展示日期选择器或者日程管理功能。在本案例中，提供的压缩包文件包含了实现这一功能的代码示例。 首先，让我们了解一下...

    一个不错的日历代码 javascript编写

    用JavaScript编写的一款比较经典的日历代码

    几款漂亮的js 日历代码集合

    这些js日历代码集合中的每一款都有其独特之处，可以根据你的项目需求和设计风格选择合适的一款。在实际应用中，开发者需要注意日历控件的可访问性、兼容性和性能优化，确保在各种浏览器和设备上都能良好运行。同时，...

    c 语言日历源代码

    小项目：c语言日历表，课上练习，可以实现按键响应。

    安卓日历源代码

    这个"安卓日历源代码"提供了一个简洁的实现，对于开发者来说是一个宝贵的资源，可以帮助理解如何在Android平台上构建和定制日历功能。下面将详细讨论相关知识点。 1. **安卓日历API**： 安卓系统提供了`android....

    日历源代码javascript

    在给定的“日历源代码javascript”主题中，我们可以深入探讨JavaScript如何用于创建一个功能丰富的日历组件。 首先，`PopupCalendar.htm`可能是日历组件的主展示页面，它通常会包含HTML结构以及引用JavaScript文件...

    日历java代码日历java代码日历java代码

    日历java代码日历java代码日历java代码

Magicbox
Global site tag (gtag.js) - Google Analytics