• js日历


    <div class='data_box'id='data_box'>
        <input type='text'class='showDate' value='点击选择日期' />
        <div class='sel_date dn'>
            <div class='clearfix'>
                <span class='prev_y fl'>&lt;&lt;</span><span class='prev_m fl'>&lt;</span>
                <span class='next_y fr'>&gt;&gt;</span><span class='next_m fr'>&gt;</span>
                <div class='show_mn'>
                    <input disabled type='text' class='showDate2 year' value='选择年份' />
                    <span class='ml5 mr5'></span>
                    <input disabled type='text' class='showDate2 month' value='选择月份' />
                    <span class='ml5'></span>
                </div>
            </div>
            <table class='data_table'>
                <thead>
                <tr>
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                </thead>
                <tbody id='tbody'>
                <tr>
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    * {padding:0;margin:0;font-size:12px;}
    .fl {float:left}
    .fr {float:right}
    .dn {display:none}
    /* begin*/
    .data_box           {width:260px; }
    .showDate           {width:248px;height:30px;line-height:30px;padding:0 5px;border:1px solid #e1e1e1;color:#999;display:block;cursor:pointer}
    .show_mn            {text-align:center;padding:0 20px;}
    .sel_date           {margin-top:10px;border:1px solid #999;padding:3px}
    .data_table         {width:100%;margin-top:10px;}
    .data_table td      {text-align:center;cursor:pointer;height:24px;font-size:14px;}
    .data_table td.active{color:#fff;background-color:#999}
    .data_table td.hover{color:blue;}
    .showDate2          {width:35px;padding:3px 5px;color:#999;border:1px solid #e1e1e1;text-align:center}
    .showDate2.active   {border:1px solid #c50000; }
    .prev_m,.next_m     {width:10px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px'}
    
    .prev_y,.next_y     {width:18px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px';margin:0 5px;}
    function getclass(parent,classname){
        var tags=parent.getElementsByTagName('*');
        var temp=[];
        for(var i=0;i<tags.length;i++){
            if(tags[i].className.match(new RegExp('(^|\s+)' + classname + '(\s+|$)'))){
                temp.push(tags[i]);
            }
        }
        return temp;
    }
    
    function showDate(option){
        this.obj=document.getElementById(option.id);
    }
    
    
    showDate.prototype.init= function () {
    
        var _self=this;
        this.dateText=getclass(_self.obj,'showDate')[0];
        this.dateBox=getclass(_self.obj,'sel_date')[0];
        this.yearBox =getclass(_self.obj, 'year')[0];
        this.mnBox = getclass(_self.obj, 'month')[0];
    
        //td beblow the tbody
        this.td=document.getElementById('tbody').getElementsByTagName('td');
    
    
        this.prevM=getclass(this.dateBox,'prev_m')[0];
        this.prevY=getclass(this.dateBox,'prev_y')[0];
        this.nextM=getclass(this.dateBox,'next_m')[0];
        this.nextY=getclass(this.dateBox,'next_y')[0];
            //add clickEvent for four button to choose month and year
    
       this.prevM.onclick= function () {
           var month=_self.mnBox.value;
           var year=_self.yearBox.value;
           if(month>1){
                _self.mnBox.value=--month;
           }else{
                _self.yearBox.value=--year;
                _self.mnBox.value=12;
           }
       }
    
    
    
        this.nextM.onclick= function () {
            var month=_self.mnBox.value;
            var year=_self.yearBox.value;
            if(month<12){
                _self.mnBox.value=++month;
            }else{
                _self.yearBox.value=++year;
                _self.mnBox.value=1;
            }
        }
    
        this.prevY.onclick= function () {
            var year=_self.yearBox.value;
            _self.yearBox.value=--year;
        }
    
        this.nextY.onclick= function () {
            var year=_self.yearBox.value;
            _self.yearBox.value=++year;
        }
    
        //click to show calen
    
        this.dateText.onfocus= function () {
            _self.clearDefault(this);
            _self.show();
            _self.showNow();
        }
    
        //onblur when set defalut
        this.dateText.onblur= function () {
            _self.setDefault(this);
        }
    
    
    
    }
    
    
    
    //clear the DefaultValue
    
    showDate.prototype.clearDefault= function (obj) {
        var deVal=obj.defaultValue;
        if(obj.value==deVal){
            obj.value='';
        }
    }
    
    
    //set the DefaultValue if there is nothing
    
    showDate.prototype.setDefault= function (obj) {
        var deVal=obj.defaultValue;
        if(obj.value==''){
            obj.value=deVal;
        }
    }
    
    
    showDate.prototype.show= function () {
        if(this.dateBox.className.match('dn')){
            this.dateBox.className=this.dateBox.className.replace('dn','')
        }
    }
    
    
    showDate.prototype.showNow= function () {
        //show year and month
        var now=new Date();
        var year=now.getFullYear();
        var month=now.getMonth()+1;
        var date=now.getDate();
        this.yearBox.value=year;
        this.mnBox.value=month;
    
        //show days
        var first = new Date(year, month - 1, 1);
        var firstDay=first.getDay();
    
        var arr31 = [1, 3, 5, 7, 8, 10, 12];
        var day;
        var _self=this;
        if(arr31.indexOf(month.toString())){
            day=31;
        }else if(month==2){
            if((year%4==0 && year%100!=0)||(year%400==0)){
                day=29;
            }else{
                day=28;
            }
        }else{
            day=30;
        }
    
        for (var i = 0,len=_self.td.length; i <len; i++) {
            _self.td[i].innerHTML = '';
            _self.td[i].className = _self.td[i].className.replace('active', '');
        }
    
        for(var j= 0,len=day;j<len;j++){
            this.td[firstDay+j].innerHTML=j+1;
            if(j+1==date && this.td[firstDay+j].className.indexOf('active')==-1){
                _self.td[j + firstDay].className += ' ';
                _self.td[j + firstDay].className += 'active';
            }
        }
        this.dateBox.onclick= function (event) {
            var e=event || window.event;
            var target= e.srcElement? e.srcElement: e.target;
            var  year=_self.yearBox.value;
            var month=_self.mnBox.value;
            for (var i = 0,len=_self.td.length; i <len; i++) {
                _self.td[i].className = _self.td[i].className.replace('active', '');
            }
            target.className+=' '+'active';
            if(typeof parseInt(target.innerHTML)=='number' && target.innerHTML!=='' && isNaN(target.innerHTML)==false){
                console.log(parseInt(target.innerHTML));
                _self.dateText.value=year+' 年 '+month+' 月 '+target.innerHTML+' 日';
                _self.dateBox.className+=' '+'dn';
            }
        }
    }
    
    
    
    
    window.onload= function () {
    
        var showDate1=new showDate({id:'data_box'});
        showDate1.init();
    
    }
  • 相关阅读:
    Unity Technologies-提供全面的技术支持服务
    Unity 大中华区核心业务
    帕斯卡(pascal)命名法:
    骆驼命名法
    匈牙利命名法
    软件分类
    模型规范
    命名规范
    22. Generate Parentheses 生成括号
    421. Maximum XOR of Two Numbers in an Array 数组中两个数的最大异或
  • 原文地址:https://www.cnblogs.com/wz0107/p/4749625.html
Copyright © 2020-2023  润新知