javascript日历控件

| 阅读数:--次| 作者:js,javascript
摘要：以前要用到日历控件都是直接从网上下载一套源码来使用，心里一直有个梗，就是想自己动手写一个日历控件，最近刚好来了兴趣，时间上也允许，于是自己摸索写了一个，功能还算完善，界面就凑合了。可能最值得说的一点就是让input控件内部右边显示一个按钮，我是直接给input加了个背景，然后把input的边框去掉实...

以前要用到日历控件都是直接从网上下载一套源码来使用，心里一直有个梗，就是想自己动手写一个日历控件，最近刚好来了兴趣，时间上也允许，于是自己摸索写了一个，功能还算完善，界面就凑合了。可能最值得说的一点就是让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>

 

返回顶部

Copyright © 2014 网址:www.webkfa.com

学到老代码浏览 关闭浏览