javascript日历控件
以前要用到日历控件都是直接从网上下载一套源码来使用，心里一直有个梗，就是想自己动手写一个日历控件，最近刚好来了兴趣，时间上也允许，于是自己摸索写了一个，功能还算完善，界面就凑合了。可能最值得说的一点就是让input控件内部右边显示一个按钮，我是直接给input加了个背景，然后把input的边框去掉实现的。
这个是最初版的，再往后打算做出纯javascript版的，再往后打算用JQuery做一套。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>日历控件</title>
<style>
#date_text {
background-image: url(images/input.png);
background-repeat:no-repeat;
width: 198px;
height: 27px;
border:none;
padding-left:5px;
cursor:pointer;
} #cal_body {
width: 198px;
height: auto;
overflow:hidden;
border: solid 1px #CCCCCC;
display: none;
position:absolute;
z-index:10;
} .line {
width:100%;
height:26px;
float:left;
background-color:#0FF;
font-size:14px;
} .cube {
float:left;
width:26px;
height:26px;
line-height:26px;
text-align:center;
margin-left:2px;
margin-bottom:2px;
} .btn {
float:left;
background-color:#CCC;
margin-left:10px;
width:20px;
height:20px;
text-align:center;
line-height:20px;
border-radius:3px;
border:solid 1px;
margin-top:2px;
cursor:pointer;
} .year_month {
float:left;
margin-left:10px;
width:90px;
height:19px;
text-align:center;
line-height:19px;
border-radius:6px;
} .end_tag {
height:26px;
line-height:26px;
margin-left:10px;
}
</style>
<script>
Date.prototype.toFormatString = function(){
var result = this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate();
return result;
}; String.prototype.year = function(){
var str = this.substring(0,4);
return str;
};
String.prototype.month = function(){
var start = this.indexOf("-") + 1;
var end = this.lastIndexOf("-");
return parseInt(this.substring(start, end)) - 1;
};
String.prototype.date = function(){
var start = this.lastIndexOf("-") + 1;
return this.substring(start);
}; var today = new Date();
var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组
var month_small = new Array("4","6","9","11"); //包含所有小月的数组 //判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false
function array_contain(array, obj){
for (var i = 0; i < array.length; i++){
if (array[i] == obj)
return true;
}
return false;
} //判断年份year是否为闰年，是闰年则返回true，否则返回false
function isLeapYear(year){
var a = year % 4;
var b = year % 100;
var c = year % 400;
if( ( (a == 0) && (b != 0) ) || (c == 0) ){
return true;
}
return false;
} function hideCalendar(){
var calbody = document.getElementById("cal_body");
cal_body.style.display = "none";
} function showCalendar(){
var calbody = document.getElementById("cal_body");
var style = getDefaultStyle(calbody,"display");
if(style == "none")
cal_body.style.display = "block";
if(style == "block")
cal_body.style.display = "none"; var date_text = document.getElementById("date_text");
var val = date_text.value;
init(val);
} function init(val){
clearCube(); var temp_date;
var year;
var month;
var date; var date_text = document.getElementById("date_text");
if(val == ""){
temp_date = today;
date_text.value = today.toFormatString();
}
else{
year = val.year();
month = val.month();
date = val.date();
temp_date = new Date(year,month,date);
} year = temp_date.getFullYear();
month = temp_date.getMonth() + 1;
date = temp_date.getDate();
temp_date.setDate(1); var start = temp_date.getDay() + 7;
var end; if(array_contain(month_big, month)){
end = start + 31;
}
else if(array_contain(month_small, month)){
end = start + 30;
}
else{
if(isLeapYear(year)){
end = start + 29;
}
else{
end = start + 28;
}
} for(var i = start; i < end; i++){
var cube = document.getElementsByClassName("cube").item(i);
cube.innerHTML = i - start + 1; cube.style.cursor = "pointer";
cube.onmouseover = function(){
this.style.backgroundColor = '#0FF';
}
if(date == (i - start + 1))
cube.style.backgroundColor = '#0FF';
else{
cube.onmouseout = function(){
this.style.backgroundColor = '';
}
}
cube.onclick = function(){
date_text.value = year + "-" + month + "-" + this.innerHTML; cal_body.style.display = "none";
}
} document.getElementById("text_year").value = year;
document.getElementById("text_month").value = month;
} function clearCube(){
for(var i=7; i < 49; i++){
var cube = document.getElementsByClassName("cube").item(i);
cube.innerHTML = "";
cube.style.backgroundColor = "";
}
} function yearDown(){
if(isValidated()){
var old_year = parseInt(document.getElementById("text_year").value);
if(old_year > 1960){
var year = old_year - 1;
var month = parseInt(document.getElementById("text_month").value);
var val = year + "-" + month + "-" + 1;
init(val);
}
}
} function yearUp(){
if(isValidated()){
var old_year = parseInt(document.getElementById("text_year").value);
if(old_year < 2050){
var year = old_year + 1;
var month = parseInt(document.getElementById("text_month").value);
var val = year + "-" + month + "-" + 1;
init(val);
}
}
} function monthDown(){
if(isValidated()){
var old_month = parseInt(document.getElementById("text_month").value)
if(old_month > 1){
var year = parseInt(document.getElementById("text_year").value);
var month = old_month - 1;
var val = year + "-" + month + "-" + 1;
init(val);
}
else {
var year = parseInt(document.getElementById("text_year").value) - 1;
var month = 12;
var val = year + "-" + month + "-" + 1;
init(val);
}
} } function monthUp(){
if(isValidated()){
var old_month = parseInt(document.getElementById("text_month").value)
if(old_month < 12){
var year = parseInt(document.getElementById("text_year").value);
var month = parseInt(document.getElementById("text_month").value) + 1;
var val = year + "-" + month + "-" + 1;
init(val);
}
else {
var year = parseInt(document.getElementById("text_year").value) + 1;
var month = 1;
var val = year + "-" + month + "-" + 1;
init(val);
}
}
} function isValidated(){
var year = document.getElementById("text_year").value;
var month = document.getElementById("text_month").value;
if(isNaN(year) || isNaN(month)){
alert("请输入正确的年份/月份");
return false;
}
else{
if(year%1 != 0 || month%1 != 0){
alert("请输入正确的年份/月份");
return false;
}
else{
year = parseInt(year);
if(year < 1960 || year > 2050){
alert("请输入1960~2050之间的年份！");
return false;
}
else if(month < 1 || month >12){
alert("请输入正确的月份！");
return false;
}
else{
return true;
}
}
}
} function changed(){
if(isValidated()){
var year = document.getElementById("text_year").value;
var month = document.getElementById("text_month").value;
var val = year + "-" + month + "-" + 1;
init(val);
}
} function getDefaultStyle(obj,attribute){
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
</script>
</head> <body>
<div id="container">
<div id="input_bg"><input id="date_text" type="text" readonly onClick="showCalendar()" /></div>
<div id="cal_body">
<div class="line"><div class="btn" id="year_down" onClick="yearDown()">-</div><input class="year_month" id="text_year" value="2015" onChange="changed()"><div class="btn" id="year_up" onClick="yearUp()">+</div><span class="end_tag">年</span></div>
<div class="line"><div class="btn" id="month_down" onClick="monthDown()">-</div><input class="year_month" id="text_month" value="5" onChange="changed()"><div class="btn" id="month_up" onClick="monthUp()">+</div><span class="end_tag">月</span></div>
<div class="cube">日</div>
<div class="cube">一</div>
<div class="cube">二</div>
<div class="cube">三</div>
<div class="cube">四</div>
<div class="cube">五</div>
<div class="cube">六</div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
<div>
</body>
</html>
javascript日历控件的更多相关文章
- 推荐一款JavaScript日历控件：kimsoft-jscalendar
一.什么是 kimsoft-jscalendar 一个简洁的avaScript日历控件,可在Java Web项目,.NET Web 项目中使用 二.kimsoft-jscalendar 有什么 ...
- JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动
JavaScript日历控件开发 概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...
- javascript日历控件——纯javascript版
平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...
- JavaScript日历控件开发
概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果 代码地址:https://github.com/aspwebchh/javascript-cont ...
- 自定义javascript日历控件
Web页中的日历一般离不开表格,通常都使用表格装载指定月的日期等信息.所以,要编写JS日历,首先必须解决的问题是表格的行与列问题.列是固定的,七列,因为一周有七天.行需要动态计算,因为,每一个月的第一 ...
- JavaScript日历控件！JS兼容IE6.7.FF.可挡住下拉控件
原文发布时间为:2009-08-22 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- JS日历控件优化(增加时分秒)
JS日历控件优化 在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下: 1. 在原基础上 支持 yyyy ...
- 【转】【WebDriver】不可编辑域和日历控件域的输入 javascript
http://blog.csdn.net/fudax/article/details/8089404 今天用到日历控件,用第一个javascript执行后页面上的日期控件后,在html中可以看到生效日 ...
- javascript实例学习之六—自定义日历控件
基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及t ...
随机推荐
- CI框架源码阅读笔记4 引导文件CodeIgniter.php
到了这里,终于进入CI框架的核心了.既然是“引导”文件,那么就是对用户的请求.参数等做相应的导向,让用户请求和数据流按照正确的线路各就各位.例如,用户的请求url: http://you.host.c ...
- textview滑动效果
网上很多在xml中改的我经过试验没用,可能是版本不兼容的原因,但在java代码中改有用head_tv1.setEllipsize(TextUtils.TruncateAt.MARQUEE);head_ ...
- 为jQuery-easyui的tab组件添加右键菜单功能
加入了右击TAB选项卡时显示关闭的上下文菜单 具体实现代码: 右键菜单 HTML: <div id="mm" class="easyui-menu" st ...
- Materialize - 响应式 Material Design 框架
由谷歌创建和设计的 Material Design(材料设计)是一种设计语言,结合成功的设计的经典原则以及创新科技.谷歌的目标是开发一个设计系统,让所有的产品在任何平台上拥有统一的用户体验. Mate ...
- 【HTML5】<datalist>标签和<select>标签的比较
<select>标签: 注:该标签定义了下拉列表的实现 <select name = "location"> <option value = &quo ...
- SharePoint Online 创建门户网站系列之准备篇
前 言 门户是SharePoint自推出以来,就非常适合的一种站点类型,在Server版本中,发布站点的应用非常广泛.这里,我们以一个个简单的例子,然后以一个固定的项目Demo,为大家演示如何一步步在 ...
- jsom sharepoint 2010 循环获取多个list的item值
<script type="text/javascript"> // <![CDATA[ var chongdianbaId; var elm = documen ...
- 1分钟实现Autodesk Vault登录对话框
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courie ...
- Eclipse CDT Linux下内存分析 实战历险
C++产品开发,上线集成时,都需要内存泄露.覆盖率等检测,这些在Windows下都有很好的工具,如 Visual Studio: 这个内置了很多的工具 Devpartner: VC6时BoundChe ...
- 【读书笔记】iOS网络-同步请求，队列式异步请求，异步请求的区别
一,同步请求的最佳实践. 1,只在后台过程中使用同步请求,除非确定访问的是本地文件资源,否则请不要在主线程上使用. 2,只有在知道返回的数据不会超出应用的内存时才使用同步请求.记住,整个响应体都会位于 ...