<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="日历.WebForm1" %>

<!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>     <meta charset="utf-8">     <title>日历组件示例</title>     <style>         .calendar         {             font-family: Tahoma;             background: #fff;             float: left;             border-style: solid;             border-width: 1px;             border-color: #85BEE5 #3485C0 #3485C0 #85BEE5;             position: relative;             padding: 10px;         }         .calendar dl, .calendar dd         {             margin: 0;             padding: 0;             width: 183px;             font-size: 12px;             line-height: 22px;         }         .calendar dt.title-date         {             display: block;             border-bottom: 1px solid #E4E4E4;             font-weight: 700;             position: relative;             margin-bottom: 5px;             padding-bottom: 3px;         }         .calendar dt         {             float: left;             width: 25px;             margin-left: 1px;             text-align: center;         }         .calendar dt.title-date         {             width: 100%;         }         .calendar dd         {             clear: both;             width: 183px;             height: 139px;             font-weight: 700;             background: url(http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_bg.png) no-repeat;             margin: 0;         }         .prevyear, .nextyear, .prevmonth, .nextmonth         {             cursor: pointer;             height: 9px;             background: url(http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_nextprv.png) no-repeat;             overflow: hidden;             position: absolute;             top: 8px;             text-indent: -999px;         }         .prevyear         {             left: 4px;             width: 9px;         }         .prevmonth         {             width: 5px;             background-position: -9px 0;             left: 20px;         }         .nextyear         {             width: 9px;             background-position: -19px 0;             right: 5px;         }         .nextmonth         {             width: 5px;             background-position: -14px 0;             right: 20px;         }         .calendar dd a         {             float: left;             width: 25px;             height: 22px;             color: blue;             overflow: hidden;             text-decoration: none;             margin: 1px 0 0 1px;             text-align: center;         }         .calendar dd a.disabled         {             color: #999;         }         .calendar dd a.tody         {             color: red;         }         .calendar dd a.on         {             background: blue;             color: #fff;         }         .calendar dd a.live         {             cursor: pointer;         }         .input         {             border: 1px solid #ccc;             padding: 4px;             background: url(http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_nextprv.png) no-repeat right -18px;         }     </style>     <script type="text/javascript" language="javascript">         /** 日历控件所用便捷函数 _CalF  * */         _CalF = {             // 选择元素             $: function (arg, context) {                 var tagAll, n, eles = [], i, sub = arg.substring(1);                 context = context || document;                 if (typeof arg == 'string') {                     switch (arg.charAt(0)) {                         case '#':                             return document.getElementById(sub);                             break;                         case '.':                             if (context.getElementsByClassName) return context.getElementsByClassName(sub);                             tagAll = _CalF.$('*', context);                             n = tagAll.length;                             for (i = 0; i < n; i++) {                                 if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);                             }                             return eles;                             break;                         default:                             return context.getElementsByTagName(arg);                             break;                     }                 }             },             // 绑定事件             bind: function (node, type, handler) {                 node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on' + type, handler);             },             // 获取元素位置             getPos: function (node) {                 var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,                 scrollt = document.documentElement.scrollTop || document.body.scrollTop;                 pos = node.getBoundingClientRect();                 return { top: pos.top + scrollt, right: pos.right + scrollx, bottom: pos.bottom + scrollt, left: pos.left + scrollx }             },             // 添加样式名             addClass: function (c, node) {                 node.className = node.className + ' ' + c;             },             // 移除样式名             removeClass: function (c, node) {                 var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)", "g");                 node.className = node.className.replace(reg, '');             },             // 阻止冒泡             stopPropagation: function (event) {                 event = event || window.event;                 event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;             }         };         /**         * @name Calender         * @constructor         * */         function Calender() {             this.initialize.apply(this, arguments);         }         Calender.prototype = {             constructor: Calender,             // 模板数组             _template: [         '<dl>',         '<dt class="title-date">',         '<span class="prevyear">prevyear</span><span class="prevmonth">prevmonth</span>',         '<span class="nextyear">nextyear</span><span class="nextmonth">nextmonth</span>',         '</dt>',         '<dt><strong>日</strong></dt>',         '<dt>一</dt>',         '<dt>二</dt>',         '<dt>三</dt>',         '<dt>四</dt>',         '<dt>五</dt>',         '<dt><strong>六</strong></dt>',         '<dd></dd>',         '</dl>'],             // 初始化对象             initialize: function (options) {                 this.id = options.id; // input的ID                 this.input = _CalF.$('#' + this.id); // 获取INPUT元素                 this.isSelect = options.isSelect;   // 是否支持下拉SELECT选择年月，默认不显示                 this.inputEvent(); // input的事件绑定，获取焦点事件             },             // 创建日期最外层盒子，并设置盒子的绝对定位             createContainer: function () {                 // 如果存在，则移除整个日期层Container                 var odiv = _CalF.$('#' + this.id + '-date');                 if (!!odiv) odiv.parentNode.removeChild(odiv);                 var container = this.container = document.createElement('div');                 container.id = this.id + '-date';                 container.style.position = "absolute";                 container.zIndex = 999;                 // 获取input表单位置inputPos                 var input = _CalF.$('#' + this.id),                 inputPos = _CalF.getPos(input);                 // 根据input的位置设置container高度                 container.style.left = inputPos.left + 'px';                 container.style.top = inputPos.bottom - 1 + 'px';                 // 设置日期层上的单击事件，仅供阻止冒泡，用途在日期层外单击关闭日期层                 _CalF.bind(container, 'click', _CalF.stopPropagation);                 document.body.appendChild(container);             },             // 渲染日期             drawDate: function (odate) { // 参数 odate 为日期对象格式                 var dateWarp, titleDate, dd, year, month, date, days, weekStart, i, l, ddHtml = [], textNode;                 var nowDate = new Date(), nowyear = nowDate.getFullYear(), nowmonth = nowDate.getMonth(),                 nowdate = nowDate.getDate();                 this.dateWarp = dateWarp = document.createElement('div');                 dateWarp.className = 'calendar';                 dateWarp.innerHTML = this._template.join('');                 this.year = year = odate.getFullYear();                 this.month = month = odate.getMonth() + 1;                 this.date = date = odate.getDate();                 this.titleDate = titleDate = _CalF.$('.title-date', dateWarp)[0];                 // 是否显示SELECT                 if (this.isSelect) {                     var selectHtmls = [];                     selectHtmls.push('<select>');                     for (i = 2020; i > 1970; i--) {                         if (i != this.year) {                             selectHtmls.push('<option value ="' + i + '">' + i + '</option>');                         } else {                             selectHtmls.push('<option value ="' + i + '" selected>' + i + '</option>');                         }                     }                     selectHtmls.push('</select>');                     selectHtmls.push('年');                     selectHtmls.push('<select>');                     for (i = 1; i < 13; i++) {                         if (i != this.month) {                             selectHtmls.push('<option value ="' + i + '">' + i + '</option>');                         } else {                             selectHtmls.push('<option value ="' + i + '" selected>' + i + '</option>');                         }                     }                     selectHtmls.push('</select>');                     selectHtmls.push('月');                     titleDate.innerHTML = selectHtmls.join('');                     // 绑定change事件                     this.selectChange();                 } else {                     textNode = document.createTextNode(year + '年' + month + '月');                     titleDate.appendChild(textNode);                     this.btnEvent();                 }                 // 获取模板中唯一的DD元素                 this.dd = dd = _CalF.$('dd', dateWarp)[0];                 // 获取本月天数                 days = new Date(year, month, 0).getDate();                 // 获取本月第一天是星期几                 weekStart = new Date(year, month - 1, 1).getDay();                 // 开头显示空白段                 for (i = 0; i < weekStart; i++) {                     ddHtml.push('<a>&nbsp;</a>');                 }                 // 循环显示日期                 for (i = 1; i <= days; i++) {                     if (year < nowyear) {                         ddHtml.push('<a class="live disabled">' + i + '</a>');                     } else if (year == nowyear) {                         if (month < nowmonth + 1) {                             ddHtml.push('<a class="live disabled">' + i + '</a>');                         } else if (month == nowmonth + 1) {                             if (i < nowdate) ddHtml.push('<a class="live disabled">' + i + '</a>');                             if (i == nowdate) ddHtml.push('<a class="live tody">' + i + '</a>');                             if (i > nowdate) ddHtml.push('<a class="live">' + i + '</a>');                         } else if (month > nowmonth + 1) {                             ddHtml.push('<a class="live">' + i + '</a>');                         }                     } else if (year > nowyear) {                         ddHtml.push('<a class="live">' + i + '</a>');                     }                 }                 dd.innerHTML = ddHtml.join('');

// 如果存在，则先移除                 this.removeDate();                 // 添加                 this.container.appendChild(dateWarp);

//IE6 select遮罩                 var ie6 = !!window.ActiveXObject && !window.XMLHttpRequest;                 if (ie6) dateWarp.appendChild(this.createIframe());

// A link事件绑定                 this.linkOn();                 // 区域外事件绑定                 this.outClick();             },

createIframe: function () {                 var myIframe = document.createElement('iframe');                 myIframe.src = 'about:blank';                 myIframe.style.position = 'absolute';                 myIframe.style.zIndex = '-1';                 myIframe.style.left = '-1px';                 myIframe.style.top = 0;                 myIframe.style.border = 0;                 myIframe.style.filter = 'alpha(opacity= 0 )';                 myIframe.style.width = this.container.offsetWidth + 'px';                 myIframe.style.height = this.container.offsetHeight + 'px';                 return myIframe;

},

// SELECT CHANGE 事件             selectChange: function () {                 var selects, yearSelect, monthSelect, that = this;                 selects = _CalF.$('select', this.titleDate);                 yearSelect = selects[0];                 monthSelect = selects[1];                 _CalF.bind(yearSelect, 'change', function () {                     var year = yearSelect.value;                     var month = monthSelect.value;                     that.drawDate(new Date(year, month - 1, that.date));                 });

_CalF.bind(monthSelect, 'change', function () {                     var year = yearSelect.value;                     var month = monthSelect.value;                     that.drawDate(new Date(year, month - 1, that.date));                 })             },             // 移除日期DIV.calendar             removeDate: function () {                 var odiv = _CalF.$('.calendar', this.container)[0];                 if (!!odiv) this.container.removeChild(odiv);             },             // 上一月，下一月按钮事件             btnEvent: function () {                 var prevyear = _CalF.$('.prevyear', this.dateWarp)[0],                 prevmonth = _CalF.$('.prevmonth', this.dateWarp)[0],                 nextyear = _CalF.$('.nextyear', this.dateWarp)[0],                 nextmonth = _CalF.$('.nextmonth', this.dateWarp)[0],                 that = this;                 prevyear.onclick = function () {                     var idate = new Date(that.year - 1, that.month - 1, that.date);                     that.drawDate(idate);                 };                 prevmonth.onclick = function () {                     var idate = new Date(that.year, that.month - 2, that.date);                     that.drawDate(idate);                 };                 nextyear.onclick = function () {                     var idate = new Date(that.year + 1, that.month - 1, that.date);                     that.drawDate(idate);                 };                 nextmonth.onclick = function () {                     var idate = new Date(that.year, that.month, that.date);                     that.drawDate(idate);                 }             },             // A 的事件             linkOn: function () {                 var links = _CalF.$('.live', this.dd), i, l = links.length, that = this;                 for (i = 0; i < l; i++) {                     links[i].index = i;                     links[i].onmouseover = function () {                         _CalF.addClass("on", links[this.index]);                     };                     links[i].onmouseout = function () {                         _CalF.removeClass("on", links[this.index]);                     };                     links[i].onclick = function () {                         that.date = this.innerHTML;                         that.input.value = that.year + '-' + that.month + '-' + that.date;                         that.removeDate();                     }                 }             },             // 表单的事件             inputEvent: function () {                 var that = this;                 _CalF.bind(this.input, 'focus', function () {                     that.createContainer();                     that.drawDate(new Date());                 });             },             // 鼠标在对象区域外点击，移除日期层             outClick: function () {                 var that = this;                 _CalF.bind(document, 'click', function (event) {                     event = event || window.event;                     var target = event.target || event.srcElement;                     if (target == that.input) return;                     that.removeDate();                 })             }         };         //        var myDate1 = new Calender({ id: 'j_Date1' });               </script> </head> <body>     <div>         <center>             <h3>                 简单的日历</h3>             <div>                 <input type="text" id="j_Date" class="input"/></div>         </center>     </div>     <!--日历初始化-->     <script type="text/javascript" language="javascript">         var myDate2 = new Calender({ id: 'j_Date', isSelect: !0 });     </script> </body> </html>

javascript 小日历的更多相关文章

  1. 12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  2. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  3. 11个不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...

  4. JavaScript小实例：拖拽应用（二）

    经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...

  5. javascript小实例，拖拽应用（一）

    前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...

  6. [转]11个教程中不常被提及的JavaScript小技巧

    原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...

  7. javascript小括号、中括号、大括号学习总结

    作为一名编程人员,和括号打交道是必不可少的.你可知道在不同的上下文中,括号的作用是不一样的,今天就让我们简单总结下javascript小括号.中括号.大括号的用法. 总的来说,JavaScript中小 ...

  8. 11个教程中不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...

  9. JavaScript 小实例 - 表单输入内容检测，对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

随机推荐

  1. System.UnauthorizedAccessException: 拒绝访问 temp 目录。用来运行 XmlSerializer 的标识“NT AUTHORITY\NETWORK SERVICE”没有访问 temp 目录的足够权限。CodeDom 将使用进程正在使用的用户帐户进行编译，这样，如

    解决方案:IIS的应用程序池权限不够,应用程序给localsystem账号权限即可. 以客户的服务器系统2003sp2为例,修改步骤如下: 控制面板---管理工具--Internet 信息服务(IIS ...

  2. 前端工程模块化——以一个php项目为例

    实现一个页面功能总是需要 JavaScript.CSS 和 Template 三种语言相互组织,所以我们真正需要的是一种可以将 JavaScript.CSS 和 Template 同时都考虑进去的模块 ...

  3. Meta标签中的format-detection属性及含义

    format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置: meta na ...

  4. MongoDB之【增加用户认证、增加用户、删除用户、修改用户密码、读写权限、只读权限】

    说明:增加用户是针对数据库进行操作 1.进入到数据库 use dbname 2.针对当前数据库添加用户 权限是针对当前数据 1.添加并验证用户 > use admin > db.addUs ...

  5. [译]GC专家系列1: 理解Java垃圾回收

    原文链接:http://www.cubrid.org/blog/dev-platform/understanding-java-garbage-collection/ 了解Java的垃圾回收(GC)原 ...

  6. hadoop filesystem 删除文件 复制文件 重命名文件

    private void moveFile(Configuration conf, String Path1, String Path2, String newname ) throws IOExce ...

  7. Unix/Linux中shell调用sqlplus的方式

    Unix/Linux下,shell脚本调用sqlplus的几种方式介绍: 一.最简单的shell调用sqlplus #!/bin/bash sqlplus -S /nolog > sqlplus ...

  8. Angularjs 通过WebApi 下载excel

    如果想知道 AngularJs 通过WebAPI 下载Excel.请看下文,这里仅提供了一种方案. 服务器端代码如下: protected HttpResponseMessage GenereateE ...

  9. chm文件打开，有目录没有内容

    下载下来的一些chm文件,打开的是否提示“打开此文件前总是询问”,不理睬直接打开后,只有目录,页面内容都显示“已取消到本页的导航”.原因是该CHM文件的发行商未知,将“打开此文件前总是询问”选项取消后 ...

  10. iOS 本地存储四种方法

    在iOS开发过程中,不管是做什么应用,都会碰到数据保存的问题.将数据保存到本地,能够让程序的运行更加流畅,不会出现让人厌恶的菊花形状,使得用户体验更好.下面介绍⼀一下数据保存的方式: 1.NSKeye ...