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;
};

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 date_text = document.getElementById("date_text");
    if(val == ""){
        temp_date = today;
        date_text.value = today.toFormatString();
    }
    else{
        temp_date = new Date(val);
    }

    var year = temp_date.getFullYear();
    var month = temp_date.getMonth() + 1;
    var 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>
时间： 2024-10-17 23:25:43

javascript日历控件的相关文章

javascript日历控件——纯javascript版

平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo

JavaScript日历控件！JS兼容IE6.7.FF.可挡住下拉控件

原文发布时间为:2009-08-22 -- 来源于本人的百度文章 [由搬家工具导入] <!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"><he

JavaScript弹出式日历控件 无jquery

<!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><meta http-equiv="Content-Type" cont

JS日历控件优化(增加时分秒)

JS日历控件优化 在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下: 1. 在原基础上 支持 yyyy-mm-dd 的年月日的控件. 2. 在原基础上增加支持 yyyy-mm-dd HH:MM 年月日时分的控件. 3. 在原基础上增加支持 yyyy-mm-dd HH:MM:SS 年月日时分秒的控件. 4. 增加确定按钮 及 今天 和关闭按钮.当我切换到其他年份的时候,我点击 "今天"按钮 就可以返回当前的年月

PHP+JavaScript+HTML实现注册界面表单及日历控件

本文主要是介绍我做PHP网站时的一个HTML的简单静态界面,它的主要功能是用户注册界面,并且参照了网上的例子使用JavaScript判断和My97DatePicker的日历控件.界面效果如下图所示: 同时插入数据库显示效果如下图所示: 可以看到引用My97DatePicker的日历控件及判断效果如下图所示:    其中注册界面register_student.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

javaScript实现日历控件

最近学习js,闲来无事就写了个简单的日历控件,不知道别人是怎么实现的,纯粹自己想法写的, 写的不好 ,但可以起到抛砖引玉的作用. 先来看效果. 调用时候的代码 就一句,引入我写的js文件, 前提text框必须有rlk="rl"  才会被我识别成要做日历控件的文本框, 我回把它设为readonly js代码也很简单,一些简单的算法,然后画出div 里面再画个table,根据文本框的位置进行定位就行了..代码很简单 大家可以看看. 我把完整代码和实例放在一起,大家可以去免费下载. 下载地址

javascript实例学习之六—自定义日历控件

基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及tool.js做的日历插件 $().extend('datePicker', function() { //生成日历插件 var $yearSpan; var $monthSpan; var tds; var $prevBtn; var $nextBtn; var $lastTr; var $date

Javascript——date日历控件

*功能没全,还需要自己修改 <!DOCTYPE html> <html> <head> <meta content="width =device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta content="yes" name="apple-mobile

JQuery日历控件

日历控件最后一弹——JQuery实现,换汤不换药.原理一模一样,换了种实现工具.关于日历的终于写完了,接下来研究研究nodejs.嗯,近期就这点事了. 同样还是将input的id设置成calendar就可以使用这个控件了. <input id="calendar" type="text" /> 当然别忘了引用jquery库,必须在引用这个控件之前引用jquery库. calendar_jquery.js源代码: // JavaScript Documen