jquery日历控件实现方法分享


Posted in Javascript onMarch 07, 2014

注释掉的是默认的css样式,你可以修改成自己的样式实现另一个风格,大家参考使用吧

/**
 * jQuery Calendar Plugin
 */
(function($, window) {
    'use strict';
    $.fn.calendar = function(options) {
        //check is select, if nothing select, return this
        if (!this.length) {
            if (options && options.debug && window.console) {
                console.log("nothing select");
            }
            return this;
        }
        var self = $(this);
        // default parameter setting
        var defaults = {
            cssPath: '', //user-define loading path of css file
            eventName: 'click', //user-define the event name that triggers the control
            onSelectDate: null, //callback function after select date
            autoClose: false
        };
        //inherit user-defined parameter
        defaults = $.extend(defaults, options);
        //default as data of the day
        var d_date = new Date();
        var _date = {
            year: d_date.getFullYear(),
            month: d_date.getMonth() + 1,
            day: d_date.getDate(),
            week: d_date.getDay()
        };
        //default template of plugin
        var calendarDiv = '<div id="calendar" class="cld_grid" style="display:none;z-index:100;">';
        calendarDiv += '<div id="calendar_year_month" class="cld_year_month" style="position:relative;">';
        calendarDiv += '<div id="last-year" style="position:absolute;left:30px;"><</div>';
        calendarDiv += '<div id="last-month" style="position:absolute;left:60px;"><<</div>';
        calendarDiv += '<div id="next-year" style="position:absolute;right:30px;">></div>';
        calendarDiv += '<div id="next-month" style="position:absolute;right:60px;">>></div>';
        calendarDiv += '<input style="width:40px;text-align:center;" type="text" id="calendar_year" value="' + _date.year + '">-<input style="width:25px;text-align:center;" type="text" id="calendar_month" value="' + _date.month + '"></div>'
        calendarDiv += '<div id="calendar_week_box" class="cld_week_box clearfix">';
        calendarDiv += '<div class="header-day" data-index = "0">日</div>';
        calendarDiv += '<div class="header-day" data-index = "1">一</div>';
        calendarDiv += '<div class="header-day" data-index = "2">二</div>';
        calendarDiv += '<div class="header-day" data-index = "3">三</div>';
        calendarDiv += '<div class="header-day" data-index = "4">四</div>';
        calendarDiv += '<div class="header-day" data-index = "5">五</div>';
        calendarDiv += '<div class="header-day" data-index = "6">六</div>';
        calendarDiv += '</div>';
        calendarDiv += '<div class="days clearfix">';
        for (var k = 0; k < 35; k++) {
            calendarDiv += '<div class="day"><span class="day-number">' + '' + '</span></div>';
        }
        calendarDiv += '</div></div>';
        var calendarAction = {
            //initialization
            initAction: function() {
                calendarAction.thisClick();
                calendarAction.inputChange();
                calendarAction.buttonChange();
                calendarAction.chooseDate();
            },
            //click to display
            thisClick: function() {
                self.bind(defaults.eventName, function(e) {
                    calendarAction.showCalendar();
                });
            },
            //when year and month in the input box changes
            inputChange: function() {
                $('#calendar_year, #calendar_month').bind('change', function() {
                    var year = $('#calendar_year').val(),
                        month = $('#calendar_month').val();
                    if (!/^\d{4}$/.test(year)) {
                        alert('please input four-digit year');
                        return false;
                    }
                    if (!/^\d{1,2}$/.test(month) || (month > 12 || month <= 0)) {
                        alert('please input proper month');
                        return false;
                    }
                    //Initialize after year and month changes
                    init_day_numbers(year, month);
                });
            },
            //click to change year and month
            buttonChange: function() {
                $('#last-year').bind('click', function() {
                    var lastYear = parseInt($('#calendar_year').val()) - 1 > 0 ? parseInt($('#calendar_year').val()) - 1 : 1;
                    $('#calendar_year').val(lastYear);
                    init_day_numbers(lastYear, $('#calendar_month').val());
                });
                $('#last-month').bind('click', function() {
                    var lastMonth = parseInt($('#calendar_month').val()) - 1 > 0 ? parseInt($('#calendar_month').val()) - 1 : 12,
                        thisYear = lastMonth == 12 ? parseInt($('#calendar_year').val()) - 1 : $('#calendar_year').val();
                    $('#calendar_month').val(lastMonth);
                    $('#calendar_year').val(thisYear);
                    init_day_numbers(thisYear, lastMonth);
                });
                $('#next-year').bind('click', function() {
                    var nextYear = parseInt($('#calendar_year').val()) + 1;
                    $('#calendar_year').val(nextYear);
                    init_day_numbers(nextYear, $('#calendar_month').val());
                });
                $('#next-month').bind('click', function() {
                    var nextMonth = parseInt($('#calendar_month').val()) + 1 <= 12 ? parseInt($('#calendar_month').val()) + 1 : 1,
                        thisYear = nextMonth == 1 ? parseInt($('#calendar_year').val()) + 1 : $('#calendar_year').val();
                    $('#calendar_month').val(nextMonth);
                    $('#calendar_year').val(thisYear);
                    init_day_numbers(thisYear, nextMonth);
                });
            },
            //set the relative offset between control and webpage, then display
            showCalendar: function() {
                var o_x = self.offset().left,
                    o_y = self.offset().top + self[0].offsetHeight;
                $('#calendar').css({
                    'position': 'absolute',
                    'left': o_x,
                    'top': o_y,
                    'display': 'block'
                });
            },
            //close plugin
            closeCalendar: function() {
                $('#calendar').hide();
            },
            //select date
            chooseDate: function() {
                $('.day').live('click', function() {
                    var _date = $(this).attr('data-date');
                    //trigger callback function
                    if ($.isFunction(defaults.onSelectDate)) {
                        defaults.onSelectDate.call(this, _date);
                    }
                    if (defaults.autoClose) {
                        calendarAction.closeCalendar();
                    }
                });
            }
        };
        //write calendar template in webpage
        $('body').append(calendarDiv);
        //initialize the year, month, day of calendar list
        init_day_numbers(_date.year, _date.month);
        //initialize plugin action
        calendarAction.initAction();
        function init_day_numbers(year, month) {
            var maxday = getmaxDay(year, month),
                firstWeek,beforeNumber,
                startIndex = beforeNumber = firstWeek = getFirstWeek(year, month),
                afterNumber = 35 - maxday - beforeNumber,
                lastMonthMaxDay = getMaxDayByLastMonth(year, month),
                nextMonthMaxDay = getMaxDayByNextMonth(year, month),
                Edge = getLastAndNextDate(year, month);
            var default_html = '';
            for (var k = 0; k < 35; k++) {
                default_html += '<div class="day"><span class="day-number">' + '' + '</span></div>';
            };
            $('.days').html(default_html);
            for (var s = 1; s <= maxday; s++) {
                $('.day-number').eq(startIndex).text(s);
                $('.day').eq(startIndex).attr('data-date', year + '-' + month + '-' + s);
                if (s == _date.day && year == _date.year && month == _date.month) {
                    $('.day').eq(startIndex).addClass('today');
                }
                startIndex++;
            };
            for (var k = 0; k < beforeNumber; k++) {
                var realDay = lastMonthMaxDay - beforeNumber + k + 1;
                $('.day-number').eq(k).text(realDay);
                $('.day-number').eq(k).addClass('last-month');
                $('.day').eq(k).attr('data-date', Edge.lastY + '-' + Edge.lastM + '-' + realDay);
            };
            for (var l = 1; l <= afterNumber; l++) {
                var _index = beforeNumber + maxday + (l - 1);
                $('.day-number').eq(_index).text(l);
                $('.day-number').eq(_index).addClass('next-month');
                $('.day').eq(_index).attr('data-date', Edge.nextY + '-' + Edge.nextM + '-' + l);
            }
        }
        function getLastAndNextDate(year, month) {
            var lastM = month - 1 > 0 ? month - 1 : 12,
                lastY = lastM == 12 ? year - 1 : year,
                nextM = month + 1 > 12 ? 1 : month + 1,
                nextY = nextM == 1 ? year + 1 : year;
            return {
                lastM: lastM,
                lastY: lastY,
                nextM: nextM,
                nextY: nextY
            };
        }
        //obtain what the first day of one month is in a week
        function getFirstWeek(year, month) {
            var date = new Date(year, month - 1, 1);
            return date.getDay();
        }
        //obtain the year, month, day of today
        function getToday() {
            var date = new Date();
            return today = [date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getDay()];
        }
        //obtain the number of days for a month
        function getmaxDay(year, month) {
            var date = new Date(year, month, 0);
            return date.getDate();
        }
        //obtain the number of days for last month
        function getMaxDayByLastMonth(year, month) {
            month = month - 1 <= 0 ? 12 : month - 1;
            year = month == 12 ? year - 1 : year;
            return getmaxDay(year, month);
        }
        //obtain the number of days for next month
        function getMaxDayByNextMonth(year, month) {
            month = month + 1 > 12 ? 1 : month + 1;
            year = month == 1 ? year + 1 : year;
            return getmaxDay(year, month);
        }
        //obtain the days list of a certain year and month, return array
        function getDayList(year, month) {
            var _list = [],
                maxday = getmaxDay(year, month),
                month = month - 1;
            for (var i = 1; i <= maxday; i++) {
                var d = new Date(year, month, i);
                _list[i - 1] = d.getDay();
            }
            return _list;
        }
    }
})(jQuery, window);
/*
<style type="text/css">
        *{margin:0;padding:0;font-size:12px;font-family: Inconsolata, Monaco, 'Andale Mono', Courier;}
        .cld_grid{width:300px;margin:auto;}
        .cld_week_box{background-color:#3883a3;width:100%;}
        .header-day{float: left;padding: 10px 0px;width: 14.2857%;text-align: center;color: white;font-family:'微软雅黑'}
        .clearfix:after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
        .day{float: left;
            width: 14.2857%;
            height: 13px;
            padding: 10px 0;
            text-align: center;
            color: #4f4f4f;
            background-color: #ebebeb;
            border-bottom: 2px solid white;
            background-image: url('http://kylestetz.github.io/CLNDR/css/./triangle.svg');
            background-size: cover;
            background-position: center;
            cursor: pointer;
        }
        .days .last-month, .days .next-month {
            opacity: 0.3;
        }
        .days .today{
            background:#fff;
        }
        .cld_year_month{   
            padding: 10px;
            background-color: #71bbd2;
            text-align: center;
            color: white;
            letter-spacing: 1px;
            font-size:14px;
        }
        .cld_year_month div{cursor:pointer;}
    </style>
*/
Javascript 相关文章推荐
Javascript条件判断使用小技巧总结
Sep 08 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
js实现简易ATM功能
Oct 27 Javascript
jquery.form.js用法之清空form的方法
Mar 07 #Javascript
jquery设置按钮停顿3秒不可用
Mar 07 #Javascript
jquery 实现两级导航菜单附效果图
Mar 07 #Javascript
document.addEventListener使用介绍
Mar 07 #Javascript
开发中可能会用到的jQuery小技巧
Mar 07 #Javascript
javascript匿名函数应用示例介绍
Mar 07 #Javascript
js登录弹出层特效
Mar 07 #Javascript
You might like
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
php中动态修改ini配置
2014/10/14 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
小程序实现投票进度条
2019/11/20 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Python实现爬取并分析电商评论
2020/06/19 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
ECHT官方网站:男女健身服
2020/02/14 全球购物
会展策划与管理专业求职信
2014/06/09 职场文书
视光学专业自荐信
2014/06/24 职场文书
商场父亲节活动方案
2014/08/27 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
5行Python代码实现一键批量扣图
2021/06/29 Python
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫