js 日历插件开发

1.HTML完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="style.css" />

    <style>

        .datepicker{

            border: 1px solid #ccc;

            border-radius: 4px;

            padding: 5px;

            height: 24px;

            line-height: 24px;

            width: 230px;

            margin: 50px auto;

            display: block;

        }

        .datepicker:focus{

            outline: 0 none;

            border: 1px solid #1abc9c;

        }

    </style>

</head>

<body>

    <input type="text" class="datepicker" />

    <script src="data.js"></script>

    <script src="main.js"></script>

    <script>

        datepicker.init('.datepicker');

    </script>

</body>

</html>

2.css样式如下：

.ui-datepicker-wrapper{

    width: 240px;

    font-size: 16px;

    color: #666;

    box-shadow: 2px 2px 8px 2px rgba(128, 128, 128, 0.3);

    display: none;

    position: absolute;

}

.ui-datepicker-wrapper-show{

    display: block;

}

.ui-datepicker-wrapper .ui-datepicker-header{

    padding: 0 20px;

    height: 50px;

    line-height: 50px;

    text-align: center;

    background: #f0f0f0;

    border-bottom: 1px solid #ccc;

    font-weight: bold;

}

.ui-datepicker-wrapper .ui-datepicker-btn{

    font-family: serif;

    font-size: 20px;

    width: 20px;

    height: 50px;

    line-height: 50px;

    color: #1abc9c;

    text-align: center;

    cursor: pointer;

    text-decoration: none;

}

.ui-datepicker-wrapper .ui-datepicker-prev-btn{

    float: left;

}

.ui-datepicker-wrapper .ui-datepicker-next-btn{

    float: right;

}

.ui-datepicker-wrapper .ui-datepicker-body table{

    width: 100%;

    border-collapse: collapse;

}

.ui-datepicker-wrapper .ui-datepicker-body th,

.ui-datepicker-wrapper .ui-datepicker-body td{

    text-align: center;

    height: 30px;

}

.ui-datepicker-wrapper .ui-datepicker-body th{

    font-size: 12px;

    height: 40px;

    line-height: 40px;

}

.ui-datepicker-wrapper .ui-datepicker-body td{

    font-size: 10px;

    border: 1px solid #f0f0f0;

    cursor: pointer;

}

.ui-datepicker-wrapper .ui-datepicker-body td.not{

    color: #c0bbbb;

    font-weight: normal;

}

.ui-datepicker-wrapper .ui-datepicker-body td.active{

    background-color: #1abc9c;

    font-weight: normal;

    color: #fff;

}

3.js代码如下：

data.js如下：

(function(){

    var datepicker = {};

    datepicker.getMonthData = function(year, month){

        var ret = [];

        // month  为真实的数据

        if(!year || !month){

        // if(!year && !month){

            var today = new Date();

            year = today.getFullYear();

            month = today.getMonth() + 1;

        }

        // 当月第一天

        var firstDay = new Date(year, month-1, 1);

        // 当月第一天的星期几

        var firstDayWeekDay = firstDay.getDay();

        // 周日处理

        if(firstDayWeekDay === 0){

            firstDayWeekDay = 7;

        }

        year = firstDay.getFullYear();

        month = firstDay.getMonth() + 1;

        // if(month < 10){

        //     month = "0" + month;

        // }

        //上个月的最后一天 (当月的第0天)

        var lastDayOfLastMonth = new Date(year, month-1, 0);

        //上个月的最后一天的日期

        var lastDateOfLastMonth = lastDayOfLastMonth.getDate();

        //当月第一天前面显示多少上月的数据

        var preMonthDayCount = firstDayWeekDay - 1;

        //当月的最后一天

        var lastDay = new Date(year, month, 0);

        //当月的最后一天的日期

        var lastDate = lastDay.getDate();

        for(var i = 0; i < 7*6; i++){

            //当月对应的日期

            var date = i + 1 - preMonthDayCount;

            var showDate = date; //显示的是哪一天

            var thisMonth = month; //当月

            if(date <= 0){

                //上一月

                thisMonth = month - 1;

                showDate = lastDateOfLastMonth + date;

            }

            else if(date > lastDate){

                //下一月

                thisMonth = month + 1;

                showDate = showDate - lastDate;

            }    

            if(thisMonth === 0){

                thisMonth = 12;

            }

            if(thisMonth === 13){

                thisMonth = 1;

            }

            ret.push({

                year: year,

                month: thisMonth,

                date: date,

                showDate: showDate

            })

        }

        return {

            year: year,

            month: month,

            days: ret,

            lastDate: lastDate

        };

    }

    window.datepicker = datepicker;

})();

main.js如下:

(function(){

    var datepicker = window.datepicker;

    var monthData;

    var $wrapper;

    //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

    datepicker.buildUi = function(year, month){

        monthData = datepicker.getMonthData(year,month);

        var html =  '<div class="ui-datepicker-header">'+

                     '<a href="#" class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a>'+

                     '<a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a>'+

                     '<span class="ui-datepicker-curr-month">'+monthData.year+'-'+padding(monthData.month)+'</span>'+

                     '</div>'+

                     '<div class="ui-datepicker-body">'+

                     '<table>'+

                     '<thead>'+

                     '<tr>'+

                     '<th>一</th>'+

                     '<th>二</th>'+

                     '<th>三</th>'+

                     '<th>四</th>'+

                     '<th>五</th>'+

                     '<th>六</th>'+

                     '<th>日</th>'+

                     '</tr>'+

                     '</thead>'+

                     '<tbody>';

        for(var i = 0; i < monthData.days.length; i++ ){

            var date = monthData.days[i];

            if(i%7 === 0){

                html += "<tr>";

            }

            // html += '<td data-date="'+date.date+'">'+date.showDate+'</td>';

            if(date.date <= 0 || date.date > monthData.lastDate){

                html +='<td class="not" data-date="'+ date.date +'">'+date.showDate+'</td>';

            }

            else if(date.year === (new Date()).getFullYear() && date.month === ((new Date()).getMonth()+1) && date.date === (new Date()).getDate()){

                html +='<td class="active" data-date="'+ date.date +'">'+date.showDate+'</td>';

            }

            else{

                html +='<td data-date="'+ date.date +'">'+date.showDate+'</td>';

            }

            if(i%7 === 6){

                html += "</tr>";

            }

        };

        html += '</tbody>'+

                '</table>'+

                '</div>';

        return html;

    };

    datepicker.render = function(direction){

        var year,month;

        if(monthData){

            year = monthData.year;

            month = monthData.month;

        }

        if(direction === 'prev'){

            month--;

            if(month === 0){

                month = 12;

                year--;

            }

        }

        if(direction === 'next'){

            month++;

        }

        // var html = datepicker.buildUi(year, month);

        // $wrapper = document.createElement("div");

        // $wrapper.className = 'ui-datepicker-wrapper';

        // $wrapper.innerHTML = html;

        // document.body.appendChild($wrapper);

        var html = datepicker.buildUi(year, month);

        $wrapper = document.querySelector('.ui-datepicker-wrapper');

        if(!$wrapper){

            $wrapper = document.createElement("div");

            document.body.appendChild($wrapper);

            $wrapper.className = 'ui-datepicker-wrapper';

        }

        $wrapper.innerHTML = html;

    }

    datepicker.init = function(input){

        datepicker.render();

        var $input = document.querySelector(input);

        var isOpen = false;

        $input.value = format(new Date());

        $input.addEventListener('click',function(){

            if(isOpen){

                $wrapper.classList.remove('ui-datepicker-wrapper-show')

                isOpen = false;

            }else{

                $wrapper.classList.add('ui-datepicker-wrapper-show')

                var left = $input.offsetLeft;

                var top = $input.offsetTop;

                var height = $input.offsetHeight;

                $wrapper.style.top = top + height + 2 + "px";

                $wrapper.style.left = left + "px";

                isOpen = true;

            }

        },false);

        $wrapper.addEventListener('click',function(e){

            var $target = e.target;

            if(!$target.classList.contains('ui-datepicker-btn')){

                return;

            }

            // 上一月

            if($target.classList.contains('ui-datepicker-prev-btn')){

                datepicker.render('prev');

            }

            // 下一月

            else if($target.classList.contains('ui-datepicker-next-btn')){

                datepicker.render('next');

            }

        }, false);

        $wrapper.addEventListener('click',function(e){

            var $target = e.target;

            if($target.tagName.toLowerCase() !== 'td'){

                return;

            }

            var date = new Date(monthData.year, monthData.month - 1, $target.dataset.date);

            $input.value = format(date);

            $wrapper.classList.remove('ui-datepicker-wrapper-show')

            isOpen = false;

        }, false);

    }

    var padding = function(num){

        if(num <= 9){

            return "0"+num;

        }

        return num;

    }

    function format(date){

        var ret = '';

        ret += date.getFullYear() + "-";

        ret += padding(date.getMonth() + 1) + "-";

        ret += padding(date.getDate());

        return ret;

    }

})();

4.最终完成效果如下：

js 日历插件开发的更多相关文章

简洁JS 日历控件支持日期和月份选择
原文出处以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...
百度的js日历
<title>百度的Js日历,值得一看</title> <style> body,td,.p1,.p2,.i{font-family:arial} body{mar ...
JS日历控件优化(增加时分秒)
JS日历控件优化在今年7月份时候写了一篇关于 "JS日历控件" 的文章 , 当时只支持年月日的日历控件,现在优化如下: 1. 在原基础上支持 yyyy ...
Js 日期选择，可以的一个页面中重复使用本JS日历，兼容IE及火狐等主流浏览器，而且界面简洁、美观，操作体验也不错。
<html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...
JS日历控件集合----附效果图、源代码
http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...
js日历学习
<!DOCTYPE html><html><head><title>自己写的JS日历,适合学习</title><script src= ...
简洁js日历控件的使用
往Web工程添加纯js日历控件在网上找到了DatePicker.js(http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html ...
JS日历控件灵活设置: 精确的时分秒.
在今年7月份时候写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持年月日的日历控件,如今优化例如以下: 1. 在原基础上支持 yyyy-mm-dd 的年月 ...
My97DatePicker{js日历插件}
VS自带了一个日历控件:Calendar,但是它有一个缺陷:即在选择,隐藏,显示的时候都会引起回传 Calendar控件的一些用法: 取值:Calendar1.SelectedDate.ToSh ...

随机推荐

Spring MVC 实现Excel的导入导出功能(1：Excel的导入)
简介这篇文章主要记录自己学习上传和导出Excel时的一些心得,企业办公系统的开发中,经常会收到这样的需求:批量录入数据.数据报表使用 Excel 打开,或者职能部门同事要打印 Excel 文件,而他 ...
Jenkins2.138配置slave节点时，启动方法只有两个选项
Jenkins2.138配置slave节点时,启动方法只有两个选项,并没有通过javaweb代理启动这个选项解决办法全局安全配置->代理->选择随机选取
多线程拷贝备份文件方法(Windows)
D:\bat\robocopy.exe D:\backupdata \\192.168.36.45\BData\ db_20170716.dmp 解释: 微软提供的robocopy.exe命令,默 ...
原生Ajax（XMLHttpRequest）
一.什么是Ajax: 全称Asynchronous JavaScript and XML: 异步的 JavaScript 和 XML: 可以在不重新加载整个页面的情况下(偷偷发数据),与服务器交换数据 ...
Python中os.listdir的排序问题
上周应别人要求,使用python批量修改文件名称.文件名有规律,当时就用了一个函数直接精确的用文件名替换了.后来想直接可以用listdir来遍历每个文件来修改更加通用一些.但是看了os.listdir ...
图片（imageView）
图片(imageView): 常用属性: android:scaleType(图片显示的格式) android:src(图片源,一般使用的资源) android:scaleType属性的常用取值 0. ...
Redis的基本操作语句
注:以下出现的key.value都需要具体 1.String类型的数据存储获取 set key value:设置key的值为value,若存在则覆盖,不存在则自动创建decrby get key:获取 ...
[翻译] ZFTokenField
ZFTokenField 本人视频教程系类 iOS中CALayer的使用效果图: iOS custom view that let you add token view inside like ...
kotlin lateinit
声明变量: private var a: String? = "" 或者:private lateinit var a: String // 使用前先初始化
xise官方网站|XISE官网|xise最新版下载|超级XISE WBMS管理V12.0版本官方网站|
诠释: 1. 破解VIP登陆限制 2.去后门 (自查) 下载地址 :https://pan.baidu.com/s/1eR2rUOM 查毒地址:http://a.virscan.org/a3983f3 ...

js 日历插件开发

js 日历插件开发的更多相关文章

随机推荐

热门专题