`

javascript日期选择组件

JavaScriptCSSJ#.net 
阅读更多
这是一个网上找的简单的日期选择组件，简单实用。附带一个超过 25 个华丽的 Web 日历组件地址如下：
http://www.oschina.net/question/12_21647?from=20110612 

<html>
<head>
<title>timer</title>
<script type="text/javascript">
function HS_DateAdd(interval,number,date){
	number = parseInt(number);
	if (typeof(date)=="string"){var date = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2])}
	if (typeof(date)=="object"){var date = date}
	switch(interval){
	case "y":return new Date(date.getFullYear()+number,date.getMonth(),date.getDate()); break;
	case "m":return new Date(date.getFullYear(),date.getMonth()+number,checkDate(date.getFullYear(),date.getMonth()+number,date.getDate())); break;
	case "d":return new Date(date.getFullYear(),date.getMonth(),date.getDate()+number); break;
	case "w":return new Date(date.getFullYear(),date.getMonth(),7*number+date.getDate()); break;
	}
}
function checkDate(year,month,date){
	var enddate = ["31","28","31","30","31","30","31","31","30","31","30","31"];
	var returnDate = "";
	if (year%4==0){enddate[1]="29"}
	if (date>enddate[month]){returnDate = enddate[month]}else{returnDate = date}
	return returnDate;
}

function WeekDay(date){
	var theDate;
	if (typeof(date)=="string"){theDate = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2]);}
	if (typeof(date)=="object"){theDate = date}
	return theDate.getDay();
}
function HS_calender(){
	var lis = "";
	var style = "";
	/*可以把下面的css剪切出去独立一个css文件*/
	style +="<style type='text/css'>";
	style +=".calender { width:170px; height:auto; font-size:12px; margin-right:14px; background:url(calenderbg.gif) no-repeat right center #fff; border:1px solid #397EAE; padding:1px}";
	style +=".calender ul {list-style-type:none; margin:0; padding:0;}";
	style +=".calender .day { background-color:#EDF5FF; height:20px;}";
    style +=".calender li { list-style-type: none; float: left; margin: 0 0px; padding: 0 !important;  background: #ffffff; background-image: none !important;}"; 
	style +=".calender .day li,.calender .date li{ float:left; width:14%; height:20px; line-height:20px; text-align:center}";
	style +=".calender li a { text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";
	style +=".calender li a:hover { color:#f30; text-decoration:underline}";
	style +=".calender li a.hasArticle {font-weight:bold; color:#f60 !important}";
	style +=".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";
	style +=".selectThisYear a, .selectThisMonth a{text-decoration:none; margin:0 2px; color:#000; font-weight:bold}";
	style +=".calender .LastMonth, .calender .NextMonth{ text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";
	style +=".calender .LastMonth { float:left;}";
	style +=".calender .NextMonth { float:right;}";
	style +=".calenderBody {clear:both}";
	style +=".calenderTitle {text-align:center;height:20px; line-height:20px; clear:both}";
	style +=".today { background-color:#ffffaa;border:1px solid #f60; padding:2px}";
	style +=".today a { color:#f30; }";
	style +=".calenderBottom {clear:both; border-top:1px solid #ddd; padding: 3px 0; text-align:left}";
	style +=".calenderBottom a {text-decoration:none; margin:2px !important; font-weight:bold; color:#000}";
	style +=".calenderBottom a.closeCalender{float:right}";
	style +=".closeCalenderBox {float:right; border:1px solid #000; background:#fff; font-size:9px; width:11px; height:11px; line-height:11px; text-align:center;overflow:hidden; font-weight:normal !important}";
	style +="</style>";

	var now;
	if (typeof(arguments[0])=="string"){
		selectDate = arguments[0].split("-");
		var year = selectDate[0];
		var month = parseInt(selectDate[1])-1+"";
		var date = selectDate[2];
		now = new Date(year,month,date);
	}else if (typeof(arguments[0])=="object"){
		now = arguments[0];
	}
	var lastMonthEndDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+now.getMonth()+"-01").getDate();
	var lastMonthDate = WeekDay(now.getFullYear()+"-"+now.getMonth()+"-01");
	var thisMonthLastDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-01");
	var thisMonthEndDate = thisMonthLastDate.getDate();
	var thisMonthEndDay = thisMonthLastDate.getDay();
	var todayObj = new Date();
	today = todayObj.getFullYear()+"-"+todayObj.getMonth()+"-"+todayObj.getDate();
	
	for (i=0; i<lastMonthDate; i++){  // Last Month's Date
		lis = "<li class='lastMonthDate'>"+lastMonthEndDate+"</li>" + lis;
		lastMonthEndDate--;
	}
	for (i=1; i<=thisMonthEndDate; i++){ // Current Month's Date

		if(today == now.getFullYear()+"-"+now.getMonth()+"-"+i){
			var todayString = now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-"+i;
			lis += "<li><a href=javascript:void(0) class='today' onclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";
		}else{
			lis += "<li><a href=javascript:void(0) onclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";
		}
		
	}
	var j=1;
	for (i=thisMonthEndDay; i<6; i++){  // Next Month's Date
		lis += "<li class='nextMonthDate'>"+j+"</li>";
		j++;
	}
	lis += style;

	var CalenderTitle = "<a href='javascript:void(0)' class='NextMonth' onclick=HS_calender(HS_DateAdd('m',1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Next Month'>&raquo;</a>";
	CalenderTitle += "<a href='javascript:void(0)' class='LastMonth' onclick=HS_calender(HS_DateAdd('m',-1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Previous Month'>&laquo;</a>";
	CalenderTitle += "<span class='selectThisYear'><a href='javascript:void(0)' onclick='CalenderselectYear(this)' title='Click here to select other year' >"+now.getFullYear()+"</a></span>年<span class='selectThisMonth'><a href='javascript:void(0)' onclick='CalenderselectMonth(this)' title='Click here to select other month'>"+(parseInt(now.getMonth())+1).toString()+"</a></span>月"; 

	if (arguments.length>1){
		arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis;
		arguments[1].parentNode.innerHTML = CalenderTitle;

	}else{
		var CalenderBox = style+"<div class='calender'><div class='calenderTitle'>"+CalenderTitle+"</div><div class='calenderBody'><ul class='day'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class='date' id='thisMonthDate'>"+lis+"</ul></div><div class='calenderBottom'><a href='javascript:void(0)' class='closeCalender' onclick='closeCalender(this)'>&times;</a><span><span><a href=javascript:void(0) onclick='_selectThisDay(this)' title='"+todayString+"'>Today</a></span></span></div></div>";
		return CalenderBox;
	}
}
function _selectThisDay(d){
	var boxObj = d.parentNode.parentNode.parentNode.parentNode.parentNode;
		boxObj.targetObj.value = d.title;
		boxObj.parentNode.removeChild(boxObj);
}
function closeCalender(d){
	var boxObj = d.parentNode.parentNode.parentNode;
		boxObj.parentNode.removeChild(boxObj);
}

function CalenderselectYear(obj){
		var opt = "";
		var thisYear = obj.innerHTML;
		for (i=1970; i<=2020; i++){
			if (i==thisYear){
				opt += "<option value="+i+" selected>"+i+"</option>";
			}else{
				opt += "<option value="+i+">"+i+"</option>";
			}
		}
		opt = "<select onblur='selectThisYear(this)' onchange='selectThisYear(this)' style='font-size:11px'>"+opt+"</select>";
		obj.parentNode.innerHTML = opt;
}

function selectThisYear(obj){
	HS_calender(obj.value+"-"+obj.parentNode.parentNode.getElementsByTagName("span")[1].getElementsByTagName("a")[0].innerHTML+"-1",obj.parentNode);
}

function CalenderselectMonth(obj){
		var opt = "";
		var thisMonth = obj.innerHTML;
		for (i=1; i<=12; i++){
			if (i==thisMonth){
				opt += "<option value="+i+" selected>"+i+"</option>";
			}else{
				opt += "<option value="+i+">"+i+"</option>";
			}
		}
		opt = "<select onblur='selectThisMonth(this)' onchange='selectThisMonth(this)' style='font-size:11px'>"+opt+"</select>";
		obj.parentNode.innerHTML = opt;
}
function selectThisMonth(obj){
	HS_calender(obj.parentNode.parentNode.getElementsByTagName("span")[0].getElementsByTagName("a")[0].innerHTML+"-"+obj.value+"-1",obj.parentNode);
}
function HS_setDate(inputObj){
	var calenderObj = document.createElement("span");
	calenderObj.innerHTML = HS_calender(new Date());
	calenderObj.style.position = "absolute";
	calenderObj.targetObj = inputObj;
	inputObj.parentNode.insertBefore(calenderObj,inputObj.nextSibling);
}
  </script>
</head>
<body>
调用：

<input name="color" type="text"  onfocus="HS_setDate(this)"">

</body>
</html>
分享到：
| 网页全选javascript组件
评论
发表评论

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

相关推荐

    javascript 日期组件

    这篇博文链接指向的是作者黄其清在iteye博客上分享的一个名为“ShowCalendar.js”的JavaScript日期组件实现。这个组件可能包含创建日历、选择日期、格式化日期输出等功能，方便开发者在网页中集成日期选择功能。 在...

    vue20的移动端日期选择组件

    在Vue.js 2.0的移动端应用开发中，日期选择组件是不可或缺的一部分，它使得用户能够方便地输入或选择日期，提升用户体验。Vue Calendar是一款专为Vue 2.0设计的日期选择组件，适用于各种移动设备。下面我们将深入...

    javascript日期选择器,很强大

    JavaScript日期选择器是一种在网页上方便用户选择日期的交互组件，通常用于表单输入或事件调度等场景。在Web开发中，JavaScript提供了内置的Date对象，但为了提供更好的用户体验和更丰富的功能，开发者通常会使用...

    jQuery日期选择组件

    要使用这个jQuery日期选择组件，首先需要在HTML文档中引入jQuery库和日期选择器的JavaScript及CSS文件。接着，通过jQuery的选择器找到需要添加日期选择功能的元素，并调用`.datepicker()`方法进行初始化。 ```html ...

    WdatePicker js日期组件

    总的来说，WdatePicker作为一个成熟的JavaScript日期组件，提供了全面的功能和高度的定制性，是开发人员在构建Web应用时处理日期输入的理想选择。它的易用性和灵活性使其在各种项目中都能发挥重要作用。

    移动端日期选择vue组件

    在移动端应用开发中，用户界面往往需要各种交互组件来提高用户体验，其中日期选择器是常见的一个功能需求。Vue.js作为一款轻量级且强大的前端框架，提供了丰富的组件库以满足开发者构建复杂应用的需求。本话题将详细...

    LionSky.Net的JS日期选择

    "LionSky.Net的JS日期选择"是一个专为.NET开发者设计的JavaScript日期选择组件，它允许用户在Web应用中方便地选择日期，提高了用户体验。在网页开发中，日期选择器是一个非常重要的功能，尤其在表单输入、日程安排...

    javascript实现的日期选择器

    这个压缩包可能包含了一个自定义的JavaScript日期选择器实现。 `THUMBS.DB` 是一个图片预览数据库文件，通常在Windows系统中用于存储文件夹中的缩略图，可能与日期选择器的界面设计有关，包含了图标或示例图像。 `...

    javaScript 日期组件

    在这个场景中，我们关注的是一个名为“js日期组件二”的压缩包文件，可能包含了一个自定义的JavaScript日期处理库或一个基于现有库（如jQuery UI或Bootstrap Datepicker）的实现。 JavaScript 日期操作主要依赖于...

    跨浏览器javascript时间日期组件

    JavaScript时间日期组件是Web开发中不可或缺的部分，尤其在构建用户界面时，经常需要与用户交互显示、选择或处理日期和时间。"跨浏览器JavaScript时间日期组件"是一个专门针对这一需求设计的工具，它旨在提供一致且...

    javascript日期选择器

    JavaScript日期选择器是一种常见的前端开发组件，用于在网页上提供用户友好的日期输入方式。它通常以日历小窗口的形式出现，用户可以通过点击来选择日期，而不是手动输入，从而提高用户体验并减少输入错误。在本篇...

    extjs时间日期选择组件

    在EXTJS这个强大的JavaScript框架中，时间日期选择组件是一个至关重要的元素，它为用户提供了方便的方式来选择和输入日期和时间。这些组件使得Web应用程序能够更好地处理时间相关的数据输入，提高用户体验，同时也...

    JavaScript生成的日期组件

    首先，日期组件通常是用户界面中的一种交互元素，允许用户选择日期或设定日期范围。这种组件常见于表单填写、事件预订或时间安排等场景。JavaScript的Date对象是实现这一功能的基础，它提供了创建、操作和格式化日期...

    datePicker移动端日期选择组件

    总结来说，"datePicker移动端日期选择组件"是一个集小巧、高效、易用为一体的解决方案，涵盖了JavaScript编程、表单控件设计、响应式布局、日期处理等多个方面，是移动应用开发中的实用工具。其背后涉及到的技术和...

    ExtJS日期多选组件源码

    通过研究和理解"ExtJS日期多选组件源码"，开发者可以深入学习ExtJS组件设计、事件处理、数据绑定等核心概念，并能进一步定制适合自己项目需求的日期选择组件。这样的组件对于提高开发效率和用户体验具有积极的意义。

    移动端vue日期选择组件

    a vue component of calendar for mobile移动端vue日期选择组件

    时间日期JavaScript 选择时间日期

    常见的JavaScript日期库如moment.js、date-fns和luxon等，提供了更强大和灵活的日期处理功能，包括复杂的日期格式化、解析、比较和计算。 以上就是JavaScript处理日期和时间的一些核心知识点，这些在日常Web开发中...

    javascript日期组件

    JavaScript日期组件是Web开发中常用的一种工具，它主要用于在网页上展示、操作和处理日期与时间。在JavaScript中，没有内置的复杂日期选择器或日历功能，因此开发者通常会利用JavaScript库或自定义代码来创建这样的...

    详解vue移动端日期选择组件

    Build Setup # install dependencies npm install # build for production with minification npm run build Usage ...npm install vue-mobile-calendar...script src="vue-mobile-calendar.js" type="text/javascript

    类似携程日期选择器javascript选择特效

    总的来说，这个"类似携程日期选择器javascript选择特效"是一个基于JavaScript的日期选择组件，它模仿了携程网的用户体验，利用了JavaScript的各种技术来实现日期选择、交互效果和界面展示。对于前端开发者来说，理解...

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