<%@ 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. DTCMS自定义标签：获取所有栏目以及不显示指定栏目

    DTcms.Web.UI\Label\category.cs中 添加下面代码 /// <summary> /// 返回所有类别 /// </summary> /// <r ...

  2. 【原】隐藏ultraGrid1指定列

    void uGrdAllFlight_InitializeRow(object sender, InitializeRowEventArgs e) { /***********TEST START** ...

  3. [ Web Service ] [ SOAP ] [ JSON ] [ XML ] 格式轉換

    JSON格式產生器_Demo JSON格式產生器_ObjGen - Live JSON Generator JSON格式整理_JSON Formatter & Validator Online ...

  4. Android基于GridView实现的翻牌游戏效果

    好久没有写博客了,上一篇博文距现在都有三个多月了,实在是惭愧.但是这段时间仍然是在忙于项目或是自我充电.这几天实现了一个基于GridView的翻牌动画效果,这里就将其整理出来同各位分享. 一.整体介绍 ...

  5. WPF多线程演示

    WPF中的几种处理线程的工作方式: 1.简单的DispatcherTimer类似Timer控件 2.需要处理UI同步时,Dispatcher DispatcherOpertion 3.增强的Threa ...

  6. Path of Equal Weight (DFS)

    Path of Equal Weight (DFS)   Given a non-empty tree with root R, and with weight Wi assigned to each ...

  7. Java 多线程 简单实例 （消费者与生成者）的关系

    PS::线程这套东西在PHP里完全是不存在的概念,有待进一步的学习: PS::这个实例是根据书本上的知识进行扩展的,理解程度50%左右吧! 1.定义生产消费环境 package second; pub ...

  8. RegisterClientScriptBlock CommandName 模块列 操作完成 提示

    this.ClientScript.RegisterClientScriptBlock(this.GetType(), "Remind", "alert('获取成功!') ...

  9. POJ 2411 压缩状态DP

    这个题目非常赞! 给定一个矩形,要求用1*2 的格子进行覆盖,有多少种覆盖方法呢? dp[i][j] 当状态为j,且第i行已经完全铺满的情况下的种类数有多少种?j中1表示占了,0表示没有被占. 很显然 ...

  10. 闭包(Closures)

    浅析 JavaScript 中的闭包(Closures) 一.前言 对于 JavaScript 来说,闭包是一个非常强大的特征.但对于刚开始接触的初学者来说它又似乎是特别高深的.今天我们一起来揭开闭包 ...