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 相关文章推荐
Jquery 获取checkbox的checked问题
Nov 16 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
一篇不错的Python入门教程
2007/02/08 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python实现屏保计时器的示例代码
2018/08/08 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
优秀班集体获奖感言
2014/02/03 职场文书
教师个人鉴定材料
2014/02/08 职场文书
安全承诺书格式
2014/05/21 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
聘任合同书
2015/09/21 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书