微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

又一日历输入效果没考虑兼容性，IE通过_时间日期

php中文网

发布： 2016-05-16 19:19:21

原创

1176人浏览过

<script>

onload = function() 
{ 
    var panel = new SelectPanel; 
    var rili = new Kalendar; 
    panel.Create(); 
    rili.Create(panel); 
    panel.Apply(document.form1.a); 
    panel.Apply(document.form1.b); 
} 
</script><form name="form1"> 
<input name="a" readonly><input name="b" readonly>
</form>

<script> 
/* 日历选择类 
this.Width = 0;                             // 设置日历宽度，为零时不指定宽度。 
this.Height = 0;                            // 设置日历高度，为零时不指定高度。 
this.BorderColor = "#1095c6";               // 设置日历边框颜色。 
this.BackColor = "white";                   // 设置日历背景颜色。 
this.CapBack = "#d9ebfe";                   // 设置日历深色。 
this.Tag = doc.createElement("table");      // 日历DOM节点。 
this.Create = function(container)           // 将日历绑定到指定对象。 
*/ 
function Kalendar(win) 
{ 
    if(!win) win = self; 
    var doc = win.document; 
    var _Kalendar = this; 
    this.Width = 0; 
    this.Height = 0; 
    this.BorderColor = "#1095c6"; 
    this.BackColor = "white"; 
    this.CapBack = "#d9ebfe"; 
    this.Tag = doc.createElement("table"); 
    this.Tag.style.cursor = "default"; 
    this.Create = function(container) 
    { 
        if(!container) container = doc.body; 
        this.Parent = container; 
        this.Tag.style.borderCollapse = "collapse"; 
        this.Tag.border = 1; 
        this.Tag.borderColor = this.BorderColor; 
        this.Tag.width = this.Width ? this.Width : ""; 
        this.Tag.height = this.Height ? this.Height : ""; 
        this.Tag.rows[0].cells[0].bgColor = this.CapBack; 
        (container.Tag || container).appendChild(this.Tag); 
        BuildDateFace(new Date(sltNian.value, sltYue.value)); 
    } 
    var today = new Date; 
    var tr = this.Tag.insertRow(); tr.insertCell(); 
    var sltNian = doc.createElement("select"); 
    sltNian.options.add(new Option(today.getFullYear() + "年", today.getFullYear())); 
    InitYearSelect(); 
    function InitYearSelect() 
    { 
        while(sltNian.selectedIndex < 10) 
            sltNian.options.add(new Option(sltNian.options[0].value - 1 + "年", sltNian.options[0].value - 1), 0); 
        while(sltNian.options.length < sltNian.selectedIndex + 11) 
            sltNian.options.add(new Option(sltNian.lastChild.value - 0 + 1 + "年", sltNian.lastChild.value - 0 + 1)); 
    } 
    var sltYue = sltNian.cloneNode(); 
    for(var i = 0; i < 12;) 
    { 
        var opt = new Option(++i + "月", i-1); 
        sltYue.options.add(opt); 
    } 
    sltYue.onchange = function() 
    { 
        BuildDateFace(new Date(sltNian.value, sltYue.value)); 
    } 
    sltNian.onchange = function() 
    { 
        sltYue.onchange(); 
        InitYearSelect(); 
    } 
    sltYue.value = today.getMonth(); 
    sltNian.value = today.getFullYear(); 
    tr.cells[0].appendChild(sltNian); 
    tr.cells[0].appendChild(sltYue); 
    tr.cells[0].colSpan = 7; 
    tr.cells[0].align = "center"; 
    var tBody = this.Tag.tBodies[0]; 
    tBody.insertRow(); 
    for(var i = 0; i < 7; i++) 
    { 
        var td = tBody.rows[1].insertCell(); 
        td.align = "center"; 
        td.appendChild(doc.createTextNode("日一二三四五六".charAt(i))); 
    } 
    tBody.rows[1].cells[0].style.color = "red"; 
    tBody.rows[1].cells[6].style.color = "green"; 
    for(var i = 0; i < 6; i++) 
    { 
        var row = tBody.rows[1].cloneNode(true); 
        tBody.appendChild(row); 
        IRow.apply(row); 
    } 
    tBody.rows[7].deleteCell(); 
    tBody.rows[7].cells[5].colSpan = 2; 
    tBody.rows[7].cells[5].lastChild.data = "清空"; 
    tBody.rows[1].style.fontWeight = "bold"; 
    function IRow() 
    { 
        for(var i = 0; i < this.cells.length; i++) 
        { 
            this.cells[i].onmouseover = function() 
            { 
                if(!IsToday(this.title)) this.bgColor = _Kalendar.CapBack; 
            } 
            this.cells[i].onmouseout = function() 
            { 
                if(!IsToday(this.title)) this.bgColor = ""; 
            } 
            this.cells[i].onclick = function() 
            { 
                _Kalendar.Parent.Owner.value = this.title; 
                _Kalendar.Parent.Tag.style.display = "none"; 
            } 
        } 
    } 
    function IsToday(date) 
    { 
        date = date.split("-"); 
        var year = parseInt(date[0]); 
        var month = parseInt(date[1], 10) - 1; 
        date = parseInt(date[2], 10); 
        return today.getFullYear() == year && 
            today.getMonth() == month && 
            today.getDate() == date; 
    } 
    function BuildDateFace(date) 
    { 
        date.setDate(1); 
        var year = date.getFullYear(); 
        var month = date.getMonth(); 
        var offset = date.getDay(); 
        var maxDate = GetDates(year, month); 
        for(var i = 0; i < maxDate; i++) 
        { 
            var td = _Kalendar.Tag.cells[i + 8 + offset]; 
            td.lastChild.data = i + 1; 
            td.title = [year, (month < 9 ? "0" : "") + (month + 1), (i < 9 ? "0" : "") + (i + 1)].join("-"); 
            td.bgColor = (IsToday(td.title)) ? _Kalendar.CapBack : ""; 
            td.disabled = false; 
        } 
        for(var i = 8 + offset + maxDate; i < _Kalendar.Tag.cells.length - 1; i++) 
        { 
            var td = _Kalendar.Tag.cells[i]; 
            td.title = ""; 
            td.lastChild.data = i - 7 - offset - maxDate; 
            td.disabled = true; 
        } 
        lastMonth = GetDates(year, month - 1); 
        while(offset) 
        { 
            var td = _Kalendar.Tag.cells[8 + (--offset)]; 
            td.title = ""; 
            td.lastChild.data = lastMonth - date.getDay() + offset + 1; 
            td.disabled = true; 
        } 
    } 
    function GetDates(year, month) 
    { 
        if(month < 0) 
        { 
            month = 11; 
            year--; 
        } 
        if(month == 12) 
        { 
            month = 0; 
            year++; 
        } 
        var date = new Date(year, month, 31); 
        return 31 - date.getDate() || 31; 
    } 
} 
/* 选择面板类 
this.Tag = doc.createElement("div");    // 面板HTML标签 
this.Owner = null;                      // 面板对应的输入框。 
this.Width = 0;                         // 宽度，为0时自适应 
this.Height = 0;                        // 面板高度，为0时自适应 
this.BorderColor = "#1095c6";           // 边框颜色 
this.BgColor = "white";                 // 面板背景颜色 
this.Create(container)                  // 将面板创建到container内 
this.Apply(target)                      // 将面板应用到目标控件。 
*/ 
function SelectPanel(win) 
{ 
    if(!win) win = self; 
    var doc = win.document; 
    var _SelectPannel = this; 
    this.Owner = null; 
    this.Tag = doc.createElement("div"); 
    this.Width = 0; 
    this.Height = 0; 
    this.BorderColor = "#1095c6"; 
    this.BgColor = "white"; 
    IMouseEvent.apply(this.Tag); 
    if(!win._PannelList) win._PannelList = [this]; 
    else win._PannelList.push(this); 
    if(!doc.onmousedown) doc.onmousedown = function() 
    { 
        for(var i in win._PannelList) 
        { 
            if(!win._PannelList[i].AllowShow && 
                win._PannelList[i].Tag.style.display != "none" && 
                doc.activeElement.tagName != "SELECT") 
                win._PannelList[i].Tag.style.display = "none"; 
        } 
    } 
    this.Create = function(container) 
    { 
        var style = this.Tag.style; 
        if(this.Width) style.width = this.Width; 
        if(this.Height) style.height = this.Height; 
        style.backgroundColor = this.BgColor; 
        style.border = "1px solid " + this.BorderColor; 
        style.position = "absolute"; 
        style.left = "0px"; 
        style.top = "0px"; 
        style.overflow = "auto"; 
        style.display = "none"; 
        (container || doc.body).appendChild(this.Tag); 
    } 
    this.Apply = function(target) 
    { 
        target.onclick = function() 
        { 
            _SelectPannel.Owner = this; 
            IMouseEvent.apply(target); 
            var x = target.offsetLeft; 
            var y = target.offsetTop + target.offsetHeight + 1; 
            var sender = target; 
            while(sender.offsetParent) 
            { 
                sender = sender.offsetParent; 
                x += sender.offsetLeft; 
                y += sender.offsetTop; 
            } 
            _SelectPannel.Tag.style.left = x + "px"; 
            _SelectPannel.Tag.style.top = y + "px"; 
            _SelectPannel.Tag.style.display = "block"; 
        } 
    } 
    function IMouseEvent() 
    { 
        this.onmouseenter = function() 
        { 
            _SelectPannel.AllowShow = true; 
        } 
        this.onmouseleave = function() 
        { 
            _SelectPannel.AllowShow = false; 
        } 
    } 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

做得比较急，所以没考虑兼容性。
通过两个类实现，一个是面板类，一个是日历类。
由于我开发时所有公共js都是在顶级窗口一次加载的，所以在子窗口创建对象时需要把当前窗口对象传进去，例如： var panel = new parent.parent.SelectPanel(self);如果没传self参数，默认就是加载js的窗口。

marcian 在网上找的那个公历算法有点复杂，呵呵。我获取当前月最大天数，以及当前月第一天是星期几是直接通过JS自带的Date函数来实现的。

复制代码代码如下:

// 获取当月最大天数 
//asfman提供更简单的方式：return (new Date(y, m+1, 0)).getDate() 
function GetDates(year, month) 
{ 
    var date = new Date(year, month, 31); 
    return 31 - date.getDate() || 31; 
} 
// 获取当月第一天是星期几 
function GetFirstDay(year, month) 
{ 
    return (new Date(year, month, 1)).getDay(); 
}  

/* 下面这部分可以不要，因为即使出现new Date(2007, -1, 31)，这种现象，Date会自动转换成Date(2006, 12, 31)
    if(month     {
        month = 11;
        year--;
    }
    if(month == 12)
    {
        month = 0;
        year++;
    }*/

火龙果写作

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

火龙果写作

106

火龙果写作

大家都在看：

日期时间处理指南_Moment.js替代方案 Vue v-html 中动态生成内容的事件绑定：一种全局方法调用方案 JavaScript实现前端单元测试入门_javascript测试 js脚本怎么实现网页元素淡入淡出_js淡入淡出动画效果脚本编写 JS正则回溯机制_性能优化要点

最佳 Windows 性能的顶级免费优化软件

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

来源：php中文网

上一篇：如何用javascript去掉字符串里的所有空格_javascript技巧下一篇：无聊，写了个日历程序，欢迎拍砖_时间日期

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

js构造函数模式是什么构造函数模式通过函数定义对象结构，使用new创建实例，如Person构造函数生成person1和person2；new操作会创建新对象、绑定this、关联原型并执行构造逻辑；方法定义在prototype上可避免内存浪费；ES6的class是其语法糖，本质仍基于原型机制。

2025-11-15 01:03:15

583

JavaScript实现模态框(Modal)组件_javascript ui 答案：使用JavaScript封装Modal类实现模态框，包含遮罩层、内容容器和关闭功能，支持动态更新标题与内容，提供确认/取消回调，通过open()/close()控制显隐，易于复用和扩展。

2025-11-14 23:54:06

845

前端AJAX怎么调用后端API_前端AJAX请求与Node后端接口对接完整流程首先确保前后端接口路径、数据格式一致，前端使用fetch发送POST请求携带JSON数据，Node后端通过Express接收并解析请求体，需配置cors中间件解决跨域问题，后端验证登录信息后返回对应结果，联调时注意服务端口、请求头类型及网络状态。

2025-11-14 23:51:33

717

js中for...in语句的使用注意 for...in用于遍历对象可枚举属性，包括继承属性，需用hasOwnProperty过滤自身属性；遍历数组时不保证顺序且会遍历非数字键，建议使用for...of或forEach；key始终为字符串类型，Symbol属性不会被遍历。

2025-11-14 23:50:03

712

js中闭包是什么？怎么用？闭包是函数与其外部作用域变量的组合，能访问并保持对外部变量的引用。1.可创建私有变量，如count无法外部访问；2.解决循环中事件绑定的变量共享问题，通过立即执行函数捕获独立i值；3.实现函数工厂，生成带预设参数的函数，如add5、add10。需注意内存泄漏、变量共享和调试困难等问题，合理使用可提升代码封装性与模块化。

2025-11-14 23:49:02

682

js中every方法怎么用？ JavaScript中every()方法用于检测数组所有元素是否满足条件，返回布尔值。constnumbers=[1,2,3,4,5];constallPositive=numbers.every(num=>num>0);console.log(allPositive);//true。constpeople=[{name:‘Alice’,age:25},{name:‘Bob’,age:30},{name:‘Charlie’,age:22}];constallAdults=people.every

2025-11-14 23:48:05

394

JS函数怎样定义函数组合_JS函数组合定义与多个函数串联方法函数组合是将多个函数串联执行的技术，核心思想为(f∘g)(x)=f(g(x))，通过compose实现右到左执行，pipe实现左到右执行，适用于数据处理链如字符串操作、React高阶组件等场景。

2025-11-14 23:39:05

700

JS迭代器原理_Symbol.iterator实现答案：Symbol.iterator是ES6提供的特殊符号，用于定义对象的迭代行为。当对象实现[Symbol.iterator]()方法并返回具有next()方法的迭代器时，即可被for...of、展开运算符等遍历。该方法返回形如{value,done}的对象，控制迭代过程。通过手动实现[Symbol.iterator]，可使自定义对象成为可迭代对象，如数字范围遍历示例所示，体现了JS统一的遍历机制和良好的控制流协作。

2025-11-14 23:37:02

847

js对象遍历顺序 JavaScript对象遍历顺序从ES2015起标准化：1.数字键按升序排列；2.字符串键按插入顺序；3.Symbol键按插入顺序。for...in、Object.keys()等对自身可枚举属性排序一致。示例中{2:‘two’,1:‘one’,a:‘alpha’,3:‘three’,b:‘beta’}经Object.keys()输出[‘1’,‘2’,‘3’,‘a’,‘b’]，验证数字键先升序、后字符串键按定义顺序。若需完全可靠插入顺序，应使用Map，其迭代顺序始终为插入顺序，不受键类型影响。注意

2025-11-14 23:32:02

311

JS模块化开发_CommonJS与ES6模块对比 CommonJS使用require和module.exports，适用于Node.js；2.ES6模块采用import/export，支持静态分析，适合前端工程化；3.CommonJS动态加载，ESM静态加载更利于优化；4.ESM支持实时绑定与tree-shaking，性能更优；5.根据环境选择：Node.js传统项目用CommonJS，现代开发首选ES6模块。

2025-11-14 23:30:06

873

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部