一个点击日历框取得时间的例子

最新推荐文章于 2022-01-27 10:33:39 发布
最新推荐文章于 2022-01-27 10:33:39 发布
阅读量1k 收藏
点赞数
分类专栏： Web 文章标签： 日历 class function date calendar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/akwolf/article/details/6834491
版权


以前在网上找的一个例子，具体是出自哪里也忘了，反正觉得很方便，拿出来和大家一起分享。

来一个简单的界面图：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 日历面板 </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css"> 
body {
	font-family:"宋体", sans-serif;
	font-size:12px;
	margin:0;
}
img {
	border:0px;
}
 
/*统一设定ul ,li样式*/
ul , li {
	margin:0;
	padding:0;
	list-style:none;
}
 
li {
	line-height:21px;
}
 
/*单元格视图样式*/
#content {
	width:750px;
	margin:0 auto;
	border-left: 1px solid #CCDDEE;
}
#content .weekTitle {
	color:#53504D;
	background:#F1FFE3;
	height:20px;
	border-bottom: 1px solid #B8E78B;
}
#content .weekTitle td {
	text-align:center;
}
#content #render {
	color:#6A6A6B;
}
#content #render td {
	height:90px;
	vertical-align: top;
	border-right: 1px solid #CCDDEE;
	border-bottom: 1px solid #CCDDEE;
}
.dayStyle {
	color:#6A6A6B;
	padding-right:2px;
	padding-top:2px;
	height:15px;
	background:#E8EEF7;
	text-align:right;
	display:block;
}
.currDay {
	background:#FFFFCC;
}
.disableText {
	color:#BABDC4;
}
</style>
 
<script type="text/javascript"> 
//<![CDATA[
 
/**************************************************
* * 根据class属性返回对象
* * 2008-6-22
* **************************************************
***************************************************/	
var getElementsByClassName = function(className){
	var alls = document.getElementsByTagName("*");
	var rets = new Array();
 
	for (var i=0;i<alls.length ; i++)
	{
		if (alls[i].className == className)
		{
			rets.push(alls[i]);
		}
	}
 
	return rets;
};
 
var Calendar = {
	model:function(){} ,
	controller:function(){} ,
	view:function(){}
};	
 
//视图层
Calendar.view = function(){
	this.currDate = new Date();
	this.tds = null;
	this.days = null;
 
	this.backNode = null;
	this.disableDays = new Array();
};
 
//根据年份返回每月天数
Calendar.view.getMonthDays = function(year){
	var feb = (year % 4 == 0)? 29:28; 
	return new Array(31, feb , 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
};
 
//初始化
Calendar.view.prototype.init = function(){
	this.setCurrMonth(new Date().getFullYear() ,new Date().getMonth());
	this.addEventForTd();
};
 
//为单元格注册事件
Calendar.view.prototype.addEventForTd = function(){
	for (var i=0;i<this.tds.length ;i++ )
	{
		this.tds[i].onclick = function(){
			var arr = this.getAttribute("dateValue").split("-");
			//alert(arr)
			alert(arr[0] +"-"+ (parseInt(arr[1])+1) +"-"+ arr[2]);
		};
	}
};
 
//设定当前版面
Calendar.view.prototype.setCurrMonth = function(y ,m){
 
	this.currDate.setFullYear(y);
	this.currDate.setMonth(m);
	this.currDate.setDate(1);
	
	this.loadDaysByMonth(y ,m);
};
 
//标示当前天
Calendar.view.prototype.markCurrDate = function(bDay ,eDay){
	var temp = new Date();
	if (this.currDate.getFullYear() == temp.getFullYear() 
						&& this.currDate.getMonth() == temp.getMonth())
	{
		for (var i=bDay;i<eDay ;i++ )
		{
			if (this.tds[i].getAttribute("dateValue").split("-")[2] == temp.getDate())
			{
				if (this.backNode)
				{
					this.backNode.className = "";
				}
				this.tds[i].className = "currDay";
				this.backNode = this.tds[i];
				return false;
			}
		}
	}
};
 
//复位版面状态
Calendar.view.prototype.reInState = function(){
	this.tds[35].parentNode.style.display = "none";
	if (this.backNode)
	{
		this.backNode.className = "";
	}
	for (var i=0;i<this.disableDays.length ;i++ )
	{
		this.disableDays[i].className = "dayStyle";
	}
	this.disableDays.length = 0;
};
 
//根据年月加载当前视图
Calendar.view.prototype.loadDaysByMonth = function(y ,m){
	y = parseInt(y) ,m = parseInt(m);
	this.reInState();	//复位版面状态
 
	//参数定位
	var beginDay = this.currDate.getDay();
	var _m = (m == 0)?11 : (m-1);
	var m_ = (m == 11)?0 : (m+1);
	var _y = (m == 0)?(y-1) : y;
	var y_ = (m == 11)?(y+1) : y;
	
	var prevMonthDays = Calendar.view.getMonthDays(_y)[_m];
	var currMonthDays = Calendar.view.getMonthDays(y)[m];
	var prevFlag = prevMonthDays - beginDay + 1 ,currFlag = 1 ,nextFlag = 1;
 
	//加载上月信息
	for (var i=0;i<beginDay ;i++ )
	{
		this.tds[i].setAttribute("dateValue" ,_y +"-"+ _m +"-"+ prevFlag);
		this.days[i].innerHTML = prevFlag;
		this.days[i].className = "dayStyle disableText";
		this.disableDays.push(this.days[i]);
		prevFlag++;
	}
	
	//加载当月信息
	for (var i=beginDay;i<currMonthDays+beginDay ;i++ )
	{
		this.tds[i].setAttribute("dateValue" ,y +"-"+ m +"-"+ currFlag);
		this.days[i].innerHTML = currFlag;
		currFlag++;
	}
	
	//加载下月信息
	for (var i=currMonthDays+beginDay;i<this.days.length ;i++ )
	{
		this.tds[i].setAttribute("dateValue" ,y_ +"-"+ m_ +"-"+ nextFlag);
		this.days[i].innerHTML = nextFlag;
		this.days[i].className = "dayStyle disableText";
		this.disableDays.push(this.days[i]);
		nextFlag++;
	}
	
	//若当月数据显示到第7行，那么显示它
	if (this.tds[35].getAttribute("dateValue"))
	{
		if (this.tds[35].getAttribute("dateValue").split("-")[2] > 20)
		{
			this.tds[35].parentNode.style.display = "";
		}
	}
 
	//标示当前天
	this.markCurrDate(beginDay ,currMonthDays+beginDay);
};
 
window.onload = function(){
	view = new Calendar.view();
	view.tds = document.getElementById("render").getElementsByTagName("td");
	view.days = getElementsByClassName("dayStyle");
	view.init();
	
	
	document.getElementById("testButton").onclick = function(){
		view.setCurrMonth(document.getElementById("testYear").value
							,document.getElementById("testMonth").value);
	};
};
 
 
//]]>
</script>
</head>
<body>
 
<div id="content">
 
	<select id="testYear">
		<option value="2005">2005</option>
		<option value="2006">2006</option>
		<option value="2007">2007</option>
		<option value="2008">2008</option>
		<option value="2009">2009</option>
		<option value="2010">2010</option>
		<option value="2011" selected="selected">2011</option>
	</select>年
	<select id="testMonth">
		<option value="0">1</option>
		<option value="1">2</option>
		<option value="2">3</option>
		<option value="3">4</option>
		<option value="4">5</option>
		<option value="5">6</option>
		<option value="6">7</option>
		<option value="7">8</option>
		<option value="8">9</option>
		<option value="9" selected="selected">10</option>
		<option value="10">11</option>
		<option value="11">12</option>
	</select>月
	<input type="button" value="设定日期" id="testButton" />
 
	<table width="100%" cellpadding="0" cellspacing="0" class="weekTitle">
		<tr>
			<td>日</td>
			<td>一</td>
			<td>二</td>
			<td>三</td>
			<td>四</td>
			<td>五</td>
			<td>六</td>
		</tr>
	</table>
 
	<table width="100%" cellpadding="0" cellspacing="0" id="render">
		<tr>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
		<tr>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
		<tr>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
		<tr>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
		<tr>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
		<tr style="display:none;">
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
	</table>
</div>
</body>
</html>


akwolf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jQuery点击Input框弹出日历代码
04-02
jQuery点击Input框弹出日历代码是一款日期插件，支持时分秒时间选择效果代码。
日历组件带农历及事件标记，绑定点击事件
weixin_42843447的博客
05-08 464
日历组件带农历及事件标记，绑定点击事件，换肤，紫金山天文台农历编码1921-2023
el-calendar日历的各种样式及事件
xia_tian666的博客
01-27 5155
element ui 中el-calendar 的各种样式，点击事件
Calendar时间操作常用方法
TPH_BETTER.的博客
01-09 8492
获取当前系统时间 1. 使用Date方式 // 直接用Date获取当前系统时间，结果：Tue May 03 08:25:44 CST 2016 Date date = new Date(); // Date中的许多方法，例如获取某年、某月、某日等，以及设置某年、某月、某日等都不再建议使用， // 建议使用calendar的各种方法替代，因此便不做记录 // 获取指定日期的毫秒数，常用来比较两个日期的大小。 date.getTime(); 2. 使用Calendar方式 // 使用Calendar获取当前
日历表（点击每一日获得当日日期）
Len
09-19 2824
说明:作为一个Java后端程序员，有时候也需要自己去写些前端代码，所以将工作中用到的一些小知识做记录分享。 *日历制作说明： 应业务要求：页面需展示一个日历表，并根据点击日期获取所需的当天数据，并显示在页面。 *日历效果展示图： *日历来历说明： i、该日历整体框架是我从网上下载； ii、自己根据项目需求与项目页面更改了部分Css与Js; iii、在此得感谢网上无私奉献的...
h5日历 点击获取当前时间的数据
z459148345的博客
06-30 777
使用：vue-calendar-component 由于需要对此组件的样式及功能的扩展 起步： npm i vue-calendar-component --save cnpm i vue-calendar-component --save //国内镜像 具体文档可以看vue-calendar-component官网 里面会有详细介绍 <Calendars :textTop="['日','一','二','三','四','五','六']" v-on:c
推荐一个小巧的JS日历
10-30
推荐一个小巧的JS日历
一个方便的php日历类.zip
07-11
主要介绍了一个比较不错的PHP日历类分享,本文直接给出了实现的类代码和使用方法示例,需要的朋友可以参考下，说到对时期和时间的处理，就一定要介绍一下日历程序的编写。但一提起编写日历，大多数人都会认为日历的...
Android 获取时间Demo
11-15
Android时间获取与使用,详细请见blog:http://blog.csdn.net/xzy2046
h5移动开发中日历插件
12-19
h5移动开发中日历插件，包括基本日历，带农历日期带，带提醒的等
android最全日历demo
11-07
android最全日历demo 基于Eclipse的android工程源码demo
页面中点击input可选择日期(calendar)
ljt9933的博客
06-04 3171
calendar.js: /** * Calendar * @param beginYear 1990 * @param endYear 2010 * @param language 0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw) * @param patternDelimiter "-" * @param date2StringPattern "yyyy-MM-dd" * @
日历和时间的获取
前端技术
09-10 1206
<input type="text" name="end_time" id="today"> function today() {//构建方法 var today = new Date();//new 出当前时间 var h = today.getFullYear();//获取年 var m = today.getMonth() + 1;//获取月 ...
获取时间日期（一）之日历
化学纤维
06-05 776
获取时间日期（一）之日历 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Visual Studio 2015、laydate获取日历 作者： 梁柏源 撰写时间：2019/6/1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
一个Servlet映射多个Mapping
akwolf
10-09 2748
在web中如果是多个角色，对应一个servlet的操作，就需要把一个servlet映射到不同的文件目录上，这样就不用为每个角色都写相同的代码。 举一个简单的例子。 需要映射的servlet: package com.akwolf.servlet; import java.
element ui 日历 点击下一个月
最新发布
07-30
点击下一个月按钮时，会自动切换到下一个月份的日历视图。 在element ui的日历组件中，点击下一个月按钮可以通过以下步骤实现： 1. 首先，需要在页面中引入element ui的相关样式和脚本文件，确保日历组件能够正常...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值