`
squll369
  • 浏览: 108667 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

日历控件,完全用CSS+JS实现

 
阅读更多

最近在学习javascript，就用他完成了一个日历控件，特此纪录以下:

 

运行效果：


代码如下，还没有做整理，都放一个html里了，以后要整理一下,

<html>
<head>
	<style>
		.body{
			background-color:white;
		}
		
		.calendar table{
			width:100%;
			height:100%;
			position:relative;
			border-collapse:collapse;
		}
		
		.calendar table th.first{ 
			height:25px;
			background-color:maroon;
			font-family: arial, helvetica;
			font-size:15px;
			color:white;
			border-right:1px solid white;
			border-left:1px solid maroon;
		}
		
		.calendar table th.mid{ 
			height:25px;
			background-color:maroon;
			font-family: arial, helvetica;
			font-size:15px;
			color:white;
			border-right:1px solid white;a
		}
		
		.calendar table th.last{ 
			height:25px;
			background-color:maroon;
			font-family: arial, helvetica;
			font-size:15px;
			color:white;
			border-right:1px solid maroon;
		}
		
		.calendar table td { 
			width:14%;
			border:1px solid maroon;
			padding:0px;
		}

		.calendar table.tdborder{
			width:100%;
			height:100%;
			position:relative;
		}

		.calendar table td.tdborderNormal{
			border:1px solid transparent;
			width:100%;
			height:100%;
			position:relative;
			padding:0px;
		}

		.calendar table td.tdborderOnfocus { 
			border:1px solid red;
			width:100%;
			height:100%;
			position:relative;
			padding:0px;
		}
		
		.calendar table td.caltitle_p {
			height:25px;
			font-family: arial, helvetica;
			font-size:20px;
			color:maroon;
			border:0px;
			text-align:center;
			cursor:pointer;
		}
		
		.calendar table td.caltitle_m {		
			height:25px;
			font-family: arial, helvetica;
			font-size:20px;
			color:maroon;
			border:0px;
			text-align:center;
		}
		
		.calendar table td.caltitle_m_lr {
			height:25px;
			font-family: arial, helvetica;
			font-size:11px;
			color:maroon;
			border:0px;
			text-align:left;
			cursor:pointer;
		}
		
		.calendar table td.caltitle_l {		
			height:25px;
			font-family: arial, helvetica;
			font-size:20px;
			color:maroon;		
			border:0px;
			text-align:center;
			cursor:pointer;
		}
		
		.calendar table td.quarter {		
			height:25px;
			font-family: arial, helvetica;
			font-size:14px;
			color:maroon;		
			border:0px;
			text-align:center;
		}
		
		.calendar table td.quartermonth {		
			height:25px;
			font-family: arial, helvetica;
			font-size:12px;
			color:maroon;		
			border:0px;
			text-align:center;
			cursor:pointer;
		}
			
		.calendar div.dateTitle{
			width:98%;
			height:15px;
			position:relative;
			font-family: arial, helvetica;
			font-size:13px;
			text-align:right;
		}
		
		.calendar div.dateContext{
			width:100%;
			height:90%;
			position:relative;
			font-family: arial, helvetica;
			font-size:12px;
			text-align:left;
			position:relative;
			border-top:1px dashed maroon;
		}
		
		.calendar tabel td.now{
			font-family: arial, helvetica;
			font-size:11px;
			cursor:hand;
			position:relative;
		}
		
	</style>
	
	<script>
		var currentDate = new Date();
			
		Date.prototype.getMonthDays = function(month,year){
			var nextMonthFiristDay = new Date();
			
			nextMonthFiristDay.setDate('1');
			
			var nowMonthFiristDay = new Date();
			nowMonthFiristDay.setDate('1');
			
			if(year){
				nowMonthFiristDay.setFullYear(year);
				nextMonthFiristDay.setFullYear(year);
			}
			
			if(month){
				nextMonthFiristDay.setMonth(month);
				nowMonthFiristDay.setMonth(month-1);
			}else{
				nextMonthFiristDay.setMonth(nextMonthFiristDay.getMonth()+1);
			}
					
			return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0);
		}
		
		Date.prototype.getFirstDayOfMonthInWeek = function(month,year){
			var today = new Date();
			today.setDate('1');
			if(year){
				today.setFullYear(year);
			}

			if(month){
				today.setMonth(month-1);
			}
			return today.getDay();
		}
		
		function addRow(tbody,strings,ishead){
			var tds = new Array();
			var texts = new Array();
			
			var _tr = document.createElement("tr");
			tbody.appendChild(_tr);
			
			for(var i=0;i<7;i++){
				if(ishead){
					tds[i] = document.createElement("th");
					if(i==0){
						tds[i].className = 'first';
					}else if(i==6){
						tds[i].className = 'last';
					}else{
						tds[i].className = 'mid';
					}					
				}else{
					tds[i] = document.createElement("td");
				}
				
				_tr.appendChild(tds[i]);
				if(strings){
						texts[i] = document.createTextNode(strings[i]);
						tds[i].appendChild(texts[i]);
				}	
			}
		}
		
		function mapMonthNum(month){
			var monthStr = new Number();
			switch (month)
			{
				case 'Jan':
				monthStr = 0
				break
				case 'Feb':
				monthStr = 1
				break
				case 'Mar':
				monthStr = 2
				break
				case 'Apr':
				monthStr = 3
				break
				case 'May':
				monthStr = 4
				break
				case 'Jun':
				monthStr = 5
				break
				case 'Jul':
				monthStr = 6
				break
				case 'Aug':
				monthStr = 7
				break
				case 'Sep':
				monthStr = 8
				break
				case 'Oct':
				monthStr = 9
				break
				case 'Nov':
				monthStr = 10
				break
				case 'Dec':
				monthStr = 11
				break
			}
			return monthStr;
		}
		
		
		function mapMonth(month){
			var monthStr = new Object();
			switch (month)
			{
				case 0:
				monthStr = 'Jan'
				break
				case 1:
				monthStr = 'Feb'
				break
				case 2:
				monthStr = 'Mar'
				break
				case 3:
				monthStr = 'Apr'
				break
				case 4:
				monthStr = 'May'
				break
				case 5:
				monthStr = 'Jun'
				break
				case 6:
				monthStr = 'Jul'
				break
				case 7:
				monthStr = 'Aug'
				break
				case 8:
				monthStr = 'Sep'
				break
				case 9:
				monthStr = 'Oct'
				break
				case 10:
				monthStr = 'Nov'
				break
				case 11:
				monthStr = 'Dec'
				break
			}
			return monthStr;
		}
		
		function addTitleMonth(td,strings,calendar,calendar_context){
			
			var quarter1table = document.createElement("table");
			var quarter1tbody = document.createElement("tbody");
			var quarter1tr = document.createElement("tr");
			
			td.appendChild(quarter1table);
			quarter1table.appendChild(quarter1tbody);
			quarter1tbody.appendChild(quarter1tr);
			
			var quarter1tds = new Array();
			
			for(var i=0;i<strings.length;i++){
					quarter1tds[i] = document.createElement("td");
					quarter1tds[i].monthvalue = mapMonthNum(strings[i]);
					
					quarter1tds[i].appendChild(document.createTextNode(strings[i]));
					quarter1tr.appendChild(quarter1tds[i]);
					quarter1tds[i].className = 'quartermonth';
					
					quarter1tds[i].onclick = function(){					
						currentDate.setMonth(this.monthvalue);
						calendar.removeChild(calendar_context);
						initCal();
					}
			}
		}
				
		function initCal(){
			var calendar = document.getElementById("calendar");		
			var calendar_context = document.createElement("table");
			
			calendar.appendChild(calendar_context);
		
			var _tbody = document.createElement("tbody");
			calendar_context.appendChild(_tbody);
						
			var days = currentDate.getMonthDays(currentDate.getMonth()+1,currentDate.getFullYear());	
		
			var cells = new Array();
			var cellDivs = new Array();
			var cellDivTbodys = new Array();
			var cellDivTrs = new Array();
			var cellDivTds = new Array();
			
			var handleDates = new Array();
			var txtNodes = new Array();			
			
			//create table;
			var calendar_title_tr = document.createElement("tr");
			
			var calendar_title_td_p = document.createElement("td");
			calendar_title_td_p.className = 'caltitle_p';
			calendar_title_td_p.appendChild(document.createTextNode("<"));
			calendar_title_td_p.onclick=function(){
				currentDate.setMonth(currentDate.getMonth()-1);
				calendar.removeChild(calendar_context);
				initCal();
			}
			
			var calendar_title_td_m = document.createElement("td");
			calendar_title_td_m.className = 'caltitle_m';
			
			var calendar_title_td_m_table = document.createElement("table");
			var calendar_title_td_m_tbody = document.createElement("tbody");
			var calendar_title_td_m_tr = document.createElement("tr");
			var calendar_title_td_m_tdl = document.createElement("td");
			var calendar_title_td_m_tdm = document.createElement("td");
			var calendar_title_td_m_tdr = document.createElement("td");
			
			calendar_title_td_m.appendChild(calendar_title_td_m_table);
			calendar_title_td_m_table.appendChild(calendar_title_td_m_tbody);
			calendar_title_td_m_tbody.appendChild(calendar_title_td_m_tr);
			calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdl);
			calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdm);
			calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdr);
			
			calendar_title_td_m_tdm.className = 'caltitle_m';
			calendar_title_td_m_tdl.className = 'caltitle_m';
			calendar_title_td_m_tdr.className = 'caltitle_m_lr';
				
			calendar_title_td_m_tdm.appendChild(document.createTextNode(mapMonth(currentDate.getMonth()) + ',' + currentDate.getFullYear()));
			
			var txtNow = document.createTextNode('[Now]');
			calendar_title_td_m_tdr.appendChild(txtNow);
			calendar_title_td_m_tdr.onclick=function(){
				currentDate = new Date();
				calendar.removeChild(calendar_context);
				initCal();
			}
			
			if(currentDate.getFullYear() == new Date().getFullYear() && currentDate.getMonth() == new Date().getMonth()){
				if(txtNow){
					calendar_title_td_m_tdr.removeChild(txtNow);
				}
			}
					
			var calendar_title_td_l = document.createElement("td");
			calendar_title_td_l.className = 'caltitle_l';
			calendar_title_td_l.appendChild(document.createTextNode(">"));
			calendar_title_td_l.onclick=function(){
				currentDate.setMonth(currentDate.getMonth()+1);
				calendar.removeChild(calendar_context);
				initCal();
			}
			
			calendar_title_tr.appendChild(calendar_title_td_p);
			var quarter1 = document.createElement("td");
			quarter1.className = 'quarter';
			var quarter2 = document.createElement("td");
			quarter2.className = 'quarter';
			
			calendar_title_tr.appendChild(quarter1);
			var monthTitles1 = ['Jan','Feb','Mar'];
			addTitleMonth(quarter1,monthTitles1,calendar,calendar_context);
			
			calendar_title_tr.appendChild(quarter2);
			var monthTitles2 = ['Apr','May','Jun'];
			addTitleMonth(quarter2,monthTitles2,calendar,calendar_context);
			
			calendar_title_tr.appendChild(calendar_title_td_m);
			
			var quarter3 = document.createElement("td");
			quarter3.className = 'quarter';
			var quarter4 = document.createElement("td");
			quarter4.className = 'quarter';
			
			calendar_title_tr.appendChild(quarter3);
			var monthTitles3 = ['Jul','Aug','Sep'];
			addTitleMonth(quarter3,monthTitles3,calendar,calendar_context);
			
			calendar_title_tr.appendChild(quarter4);
			var monthTitles4 = ['Oct','Nov','Dec'];
			addTitleMonth(quarter4,monthTitles4,calendar,calendar_context);
			
			calendar_title_tr.appendChild(calendar_title_td_l);
			
			_tbody.appendChild(calendar_title_tr);
	
			//create title;
			var calTitles = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
			addRow(_tbody,calTitles,true);
			
			//create first row;
			addRow(_tbody);
						
			var startPoint = [2,currentDate.getFirstDayOfMonthInWeek(currentDate.getMonth()+1,currentDate.getFullYear())];
			var contextDates = new Array();
			
			for(var i=0;i<days;i++){
				//alert("rows:" + startPoint[0] + ", cells:" + startPoint[1]);
			
				cells[i] = calendar_context.rows[startPoint[0]].cells[startPoint[1]];
							
				cellDivs[i] = document.createElement("table");
				cellDivs[i].className='tdborder';
				
				cellDivTbodys[i] = document.createElement("tbody");
				cellDivs[i].appendChild(cellDivTbodys[i]);
				
				cellDivTrs[i] =  document.createElement("tr");
				cellDivTbodys[i].appendChild(cellDivTrs[i]);
					
				cellDivTds[i] = document.createElement("td");
				cellDivTds[i].className='tdborderNormal';
				cellDivTrs[i].appendChild(cellDivTds[i]);
				
				
				cellDivTds[i].onmouseover = function(){
					this.className = 'tdborderOnfocus';
				}
				cellDivTds[i].onmouseout = function(){
					this.className = 'tdborderNormal';
				}
				cells[i].appendChild(cellDivs[i]);
								
				handleDates[i] = document.createElement("div");
				handleDates[i].className='dateTitle';
						
				contextDates[i] = document.createElement("div");
				contextDates[i].className='dateContext';
				
				cellDivTds[i].appendChild(handleDates[i]);
				cellDivTds[i].appendChild(contextDates[i]);
				
				txtNodes[i] = document.createTextNode(i+1);
				handleDates[i].appendChild(txtNodes[i]);
				
				var cellsPoint = startPoint[1]++;
				if(cellsPoint == 6){
					startPoint[0]++;
					startPoint[1]=0;
					if(i != days-1){
						addRow(_tbody);
					}	
				}			
			}	
		}
		
		window.onload = function(){	
			initCal();
		}	
				
	</script>
	
</head>
<body>
	<div id='calendar' class='calendar'/>
</body>
</html>
 

2011/8/7更新，完成了后台交互效果，项目在附件里

  • 大小: 26.2 KB
分享到：
| 获取classpath里文件的URL
评论
6 楼 squll369 2013-10-26  
zl_dream1106 写道
squll369 写道
zl_dream1106 写道
请问这句话的目的是什么哦？
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0); 

我好像没有写这句话呀？

汗，N久之后回来查看。代码copy一下，ctrl+f一下~~~就有了



哦，在Date.prototype里，给　Date提供了一个方法，用来返回这个月一共有多少天。这句话，就是 从毫秒－》秒 －》分 －》小时 －》天。
5 楼 zl_dream1106 2013-10-16  
squll369 写道
zl_dream1106 写道
请问这句话的目的是什么哦？
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0); 

我好像没有写这句话呀？

汗，N久之后回来查看。代码copy一下，ctrl+f一下~~~就有了
4 楼 squll369 2012-09-08  
zl_dream1106 写道
请问这句话的目的是什么哦？
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0); 

我好像没有写这句话呀？
3 楼 zl_dream1106 2012-08-09  
请问这句话的目的是什么哦？
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0); 
2 楼 bjsq618 2011-08-04  
最近再加上农历，那就更完美了
1 楼 GoodWell 2011-08-04  
顶一个啦………………
发表评论

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

相关推荐

    Html+Css+Javascript从入门到精通.pdf

    - **综合应用**：利用JavaScript制作一个功能完善的日历控件。 #### 第四部分：综合应用——建立你自己的网站 **第二十三章：建立你自己的网站** - **项目规划**：确定网站的目标和内容。 - **设计布局**：使用...

    jsp+日历控件+好用的+两款

    接着是`DatePicker`，这同样是一个常见的日历控件名称，尤其在JSP和Java Web开发中广泛使用。DatePicker通常是与输入框关联，当用户点击输入框时会弹出一个日历视图供用户选择日期。它可能基于Bootstrap、jQuery UI...

    八款不同风格的js日历控件(JS+CSS)1

    本资源提供了八款不同风格的JavaScript（JS）加CSS实现的日历控件，每一种都有其独特的设计和功能特点。下面我们将详细探讨JS和CSS在构建这些日历控件中的应用，以及如何将它们整合到网页中。 1. **JS与CSS的作用**...

    日历控件(jsp+js)

    本项目是基于JSP（JavaServer Pages）和JavaScript技术实现的一个日历控件。下面我们将深入探讨这两个技术以及它们如何结合创建这样的功能。 **JSP（JavaServer Pages）**： JSP是Java平台上的动态网页技术，它将...

    八款不同风格的日历控件(JS+CSS)6

    本资源提供了八款不同风格的日历控件，结合了JS（JavaScript）和CSS（Cascading Style Sheets）技术，旨在提升网页的用户体验和视觉效果。以下是对这些日历控件的详细解释： 1. **JS与CSS的结合**： JS...

    利用css＋javascript实现的一个日期选择器代码

    【描述】：“通过css、javascript实现一个日期选择器的源代码，实用方便”说明了这个代码实现的日期选择器具有实际应用价值，易于使用，并且结合了CSS和JavaScript的优势，为用户提供良好的交互体验。CSS负责视觉...

    八款不同风格的日历控件(JS+CSS)2

    本文将深入探讨“八款不同风格的日历控件(JS+CSS)2”这一主题，主要关注JavaScript（JS）和CSS（层叠样式表）在创建这些控件中的应用。 首先，JavaScript是一种强大的客户端脚本语言，常用于实现网页的动态效果和...

    JS+CSS日历控件

    总的来说，JS+CSS日历控件是Web开发中的一个重要组成部分，通过JavaScript和CSS的结合，实现了既实用又美观的日期选择功能。LHG Calendar作为一个成熟的日历插件，为开发者提供了便利，使得在项目中集成日历功能变得...

    埃拉伯语言日历控件(包含css和js)

    【标题】"埃拉伯语言日历控件(包含css和js)" 描述了一款专为阿拉伯语言设计的日历组件，这款控件的核心是通过CSS（层叠样式表）和JS（JavaScript）来实现的。在网页开发中，日历控件是一个常见的交互元素，用于用户...

    CSS+JS日期控件

    下面将详细介绍如何使用CSS和JavaScript来实现一个日期控件，以及涉及的关键知识点。 首先，创建日期控件的基础结构通常是一个HTML元素，如`&lt;input&gt;`或自定义的`&lt;date-picker&gt;`元素。`&lt;input type="date"&gt;`是HTML5...

    利用js和css创建日历控件

    ### 使用CSS和JavaScript创建日历控件的知识点详解 #### 一、项目概述 本项目旨在通过CSS和JavaScript实现一个可交互的日历控件。该控件不仅具有良好的视觉效果，还能让用户方便地选择日期，并在选中日期时提供反馈...

    八款不同风格的日历控件(JS+CSS)4

    在这个“八款不同风格的日历控件(JS+CSS)4”的压缩包中，我们可以看到一个名为“Calendar4.js”的文件，这很可能是一个JavaScript实现的日历控件的核心代码库。下面我们将详细探讨与日历控件相关的知识点，以及JS和...

    八款不同风格的日历控件(JS+CSS)3

    标题中的“八款不同风格的日历控件(JS+CSS)3”指的是一个包含多个样式各异的日历组件的集合，这些组件主要使用JavaScript（JS）和层叠样式表（CSS）来实现。在网页开发中，日历控件是常用的一种交互元素，允许用户...

    CSS+HTC日历选择控件

    在标签中提到了"javascript"，这意味着实现这个日历控件的核心部分可能包含JavaScript代码。JavaScript是Web开发中的脚本语言，常用于实现网页的动态效果和交互。在这个日历控件中，JavaScript可能会用于生成日历的...

    html+js+css带阴历的日历控件

    1. **调试**：使用开发者工具检查CSS样式应用情况，排查JavaScript错误，确保日历控件正常工作。 2. **性能优化**：减少不必要的DOM操作，使用事件委托提高性能，对CSS进行最小化压缩等。 综上，"html+js+css带阴历...

    八款不同风格的日历控件(JS+CSS)5

    在这个案例中，我们关注的是一个名为"八款不同风格的日历控件(JS+CSS)5"的资源，它提供了多种设计风格的日历组件，适用于JavaScript和CSS技术栈。下面将详细介绍这些知识点。 首先，日历控件的实现离不开JavaScript...

    html js脚本日历控件

    在提供的文件名中，"calendar.html"可能是包含日历控件的HTML页面，而"iptext.js"很可能是用来实现日历功能的JavaScript脚本。通过分析这两个文件，我们可以深入了解这个日历控件的具体实现细节，包括具体的DOM操作...

    6个JS日历控件个JS日历控件

    JavaScript（JS）日历控件是网页开发中常用的一种组件，用于展示日期选择功能，通常在表单中作为输入辅助工具出现。它们可以提供用户友好的界面，方便用户选择日期，而无需手动输入。以下是对JS日历控件的一些详细...

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