简单日历插件jquery.date_input.pack

于 2016-12-23 00:56:00 发布
阅读量490 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/007sx/p/6213411.html
版权

html:

<link rel="stylesheet" type="text/css" href="css/jquery.date_input.pack.css">
......
<script type="text/javascript" src="js/jquery.date_input.pack.js"></script>
......
<script type="text/javascript">
  $(function(){
    $('.date_picker').date_input();
  })
</script>
<body>
<input placeholder="日期" style="width:250px; line-height:23px;display:inline-block" type="text" class="date_picker" id="datatimeo">
</body>

 

jquery.date_input.pack.js:

DateInput = (function($) {
    function DateInput(el, opts) {
        if (typeof(opts) != "object") opts = {};
        $.extend(this, DateInput.DEFAULT_OPTS, opts);
        this.input = $(el);
        this.bindMethodsToObj("show", "hide", "hideIfClickOutside", "keydownHandler", "selectDate");
        this.build();
        this.selectDate();
        this.hide()
    };
    DateInput.DEFAULT_OPTS = {
        month_names: ["一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份", "十月份", "十一月份", "十二月份"],
        short_month_names: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        short_day_names: ["日", "一", "二", "三", "四", "五", "六"],
        start_of_week: 1
    };
    DateInput.prototype = {
        build: function() {
            var monthNav = $('<p class="month_nav">' + '<span class="button prev" title="[Page-Up]">&#171;</span>' + ' <span class="month_name"></span> ' + '<span class="button next" title="[Page-Down]">&#187;</span>' + '</p>');
            this.monthNameSpan = $(".month_name", monthNav);
            $(".prev", monthNav).click(this.bindToObj(function() {
                this.moveMonthBy( - 1)
            }));
            $(".next", monthNav).click(this.bindToObj(function() {
                this.moveMonthBy(1)
            }));
            var yearNav = $('<p class="year_nav">' + '<span class="button prev" title="[Ctrl+Page-Up]">&#171;</span>' + ' <span class="year_name"></span> ' + '<span class="button next" title="[Ctrl+Page-Down]">&#187;</span>' + '</p>');
            this.yearNameSpan = $(".year_name", yearNav);
            $(".prev", yearNav).click(this.bindToObj(function() {
                this.moveMonthBy( - 12)
            }));
            $(".next", yearNav).click(this.bindToObj(function() {
                this.moveMonthBy(12)
            }));
            var nav = $('<div class="nav"></div>').append(monthNav, yearNav);
            var tableShell = "<table><thead><tr>";
            $(this.adjustDays(this.short_day_names)).each(function() {
                tableShell += "<th>" + this + "</th>"
            });
            tableShell += "</tr></thead><tbody></tbody></table>";
            this.dateSelector = this.rootLayers = $('<div class="date_selector"></div>').append(nav, tableShell).insertAfter(this.input);
            if ($.browser.msie && $.browser.version < 7) {
                this.ieframe = $('<iframe class="date_selector_ieframe" frameborder="0" src="#"></iframe>').insertBefore(this.dateSelector);
                this.rootLayers = this.rootLayers.add(this.ieframe);
                $(".button", nav).mouseover(function() {
                    $(this).addClass("hover")
                });
                $(".button", nav).mouseout(function() {
                    $(this).removeClass("hover")
                })
            };
            this.tbody = $("tbody", this.dateSelector);
            this.input.change(this.bindToObj(function() {
                this.selectDate()
            }));
            this.selectDate()
        },
        selectMonth: function(date) {
            var newMonth = new Date(date.getFullYear(), date.getMonth(), 1);
            if (!this.currentMonth || !(this.currentMonth.getFullYear() == newMonth.getFullYear() && this.currentMonth.getMonth() == newMonth.getMonth())) {
                this.currentMonth = newMonth;
                var rangeStart = this.rangeStart(date),
                rangeEnd = this.rangeEnd(date);
                var numDays = this.daysBetween(rangeStart, rangeEnd);
                var dayCells = "";
                for (var i = 0; i <= numDays; i++) {
                    var currentDay = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), rangeStart.getDate() + i, 12, 00);
                    if (this.isFirstDayOfWeek(currentDay)) dayCells += "<tr>";
                    if (currentDay.getMonth() == date.getMonth()) {
                        dayCells += '<td class="selectable_day" date="' + this.dateToString(currentDay) + '">' + currentDay.getDate() + '</td>'
                    } else {
                        dayCells += '<td class="unselected_month" date="' + this.dateToString(currentDay) + '">' + currentDay.getDate() + '</td>'
                    };
                    if (this.isLastDayOfWeek(currentDay)) dayCells += "</tr>"
                };
                this.tbody.empty().append(dayCells);
                this.monthNameSpan.empty().append(this.monthName(date));
                this.yearNameSpan.empty().append(this.currentMonth.getFullYear());
                $(".selectable_day", this.tbody).click(this.bindToObj(function(event) {
                    this.changeInput($(event.target).attr("date"))
                }));
                $("td[date=" + this.dateToString(new Date()) + "]", this.tbody).addClass("today");
                $("td.selectable_day", this.tbody).mouseover(function() {
                    $(this).addClass("hover")
                });
                $("td.selectable_day", this.tbody).mouseout(function() {
                    $(this).removeClass("hover")
                })
            };
            $('.selected', this.tbody).removeClass("selected");
            $('td[date=' + this.selectedDateString + ']', this.tbody).addClass("selected")
        },
        selectDate: function(date) {
            if (typeof(date) == "undefined") {
                date = this.stringToDate(this.input.val())
            };
            if (!date) date = new Date();
            this.selectedDate = date;
            this.selectedDateString = this.dateToString(this.selectedDate);
            this.selectMonth(this.selectedDate)
        },
        changeInput: function(dateString) {
            this.input.val(dateString).change();
            this.hide()
        },
        show: function() {
            this.rootLayers.css("display", "block");
            $([window, document.body]).click(this.hideIfClickOutside);
            this.input.unbind("focus", this.show);
            $(document.body).keydown(this.keydownHandler);
            this.setPosition()
        },
        hide: function() {
            this.rootLayers.css("display", "none");
            $([window, document.body]).unbind("click", this.hideIfClickOutside);
            this.input.focus(this.show);
            $(document.body).unbind("keydown", this.keydownHandler)
        },
        hideIfClickOutside: function(event) {
            if (event.target != this.input[0] && !this.insideSelector(event)) {
                this.hide()
            }
        },
        insideSelector: function(event) {
            var offset = this.dateSelector.position();
            offset.right = offset.left + this.dateSelector.outerWidth();
            offset.bottom = offset.top + this.dateSelector.outerHeight();
            return event.pageY < offset.bottom && event.pageY > offset.top && event.pageX < offset.right && event.pageX > offset.left
        },
        keydownHandler: function(event) {
            switch (event.keyCode) {
            case 9:
            case 27:
                this.hide();
                return;
                break;
            case 13:
                this.changeInput(this.selectedDateString);
                break;
            case 33:
                this.moveDateMonthBy(event.ctrlKey ? -12 : -1);
                break;
            case 34:
                this.moveDateMonthBy(event.ctrlKey ? 12 : 1);
                break;
            case 38:
                this.moveDateBy( - 7);
                break;
            case 40:
                this.moveDateBy(7);
                break;
            case 37:
                this.moveDateBy( - 1);
                break;
            case 39:
                this.moveDateBy(1);
                break;
            default:
                return
            }
            event.preventDefault()
        },
        stringToDate: function(string) {
            var matches;
            if (matches = string.match(/^(\d{1,2}) ([^\s]+) (\d{4,4})$/)) {
                return new Date(matches[3], this.shortMonthNum(matches[2]), matches[1], 12, 00)
            } else {
                return null
            }
        },
        dateToString: function(date) {
            return date.getFullYear()+"-"+this.short_month_names[date.getMonth()]+"-" +date.getDate()
        },
        setPosition: function() {
            var offset = this.input.offset();
            this.rootLayers.css({
                top: offset.top + this.input.outerHeight(),
                left: offset.left
            });
            if (this.ieframe) {
                this.ieframe.css({
                    width: this.dateSelector.outerWidth(),
                    height: this.dateSelector.outerHeight()
                })
            }
        },
        moveDateBy: function(amount) {
            var newDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate() + amount);
            this.selectDate(newDate)
        },
        moveDateMonthBy: function(amount) {
            var newDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth() + amount, this.selectedDate.getDate());
            if (newDate.getMonth() == this.selectedDate.getMonth() + amount + 1) {
                newDate.setDate(0)
            };
            this.selectDate(newDate)
        },
        moveMonthBy: function(amount) {
            var newMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + amount, this.currentMonth.getDate());
            this.selectMonth(newMonth)
        },
        monthName: function(date) {
            return this.month_names[date.getMonth()]
        },
        bindToObj: function(fn) {
            var self = this;
            return function() {
                return fn.apply(self, arguments)
            }
        },
        bindMethodsToObj: function() {
            for (var i = 0; i < arguments.length; i++) {
                this[arguments[i]] = this.bindToObj(this[arguments[i]])
            }
        },
        indexFor: function(array, value) {
            for (var i = 0; i < array.length; i++) {
                if (value == array[i]) return i
            }
        },
        monthNum: function(month_name) {
            return this.indexFor(this.month_names, month_name)
        },
        shortMonthNum: function(month_name) {
            return this.indexFor(this.short_month_names, month_name)
        },
        shortDayNum: function(day_name) {
            return this.indexFor(this.short_day_names, day_name)
        },
        daysBetween: function(start, end) {
            start = Date.UTC(start.getFullYear(), start.getMonth(), start.getDate());
            end = Date.UTC(end.getFullYear(), end.getMonth(), end.getDate());
            return (end - start) / 86400000
        },
        changeDayTo: function(dayOfWeek, date, direction) {
            var difference = direction * (Math.abs(date.getDay() - dayOfWeek - (direction * 7)) % 7);
            return new Date(date.getFullYear(), date.getMonth(), date.getDate() + difference)
        },
        rangeStart: function(date) {
            return this.changeDayTo(this.start_of_week, new Date(date.getFullYear(), date.getMonth()), -1)
        },
        rangeEnd: function(date) {
            return this.changeDayTo((this.start_of_week - 1) % 7, new Date(date.getFullYear(), date.getMonth() + 1, 0), 1)
        },
        isFirstDayOfWeek: function(date) {
            return date.getDay() == this.start_of_week
        },
        isLastDayOfWeek: function(date) {
            return date.getDay() == (this.start_of_week - 1) % 7
        },
        adjustDays: function(days) {
            var newDays = [];
            for (var i = 0; i < days.length; i++) {
                newDays[i] = days[(i + this.start_of_week) % 7]
            };
            return newDays
        }
    };
    $.fn.date_input = function(opts) {
        return this.each(function() {
            new DateInput(this, opts)
        })
    };
    $.date_input = {
        initialize: function(opts) {
            $("input.date_input").date_input(opts)
        }
    };
    return DateInput
})(jQuery);

jQuery.browser={};(function(){jQuery.browser.msie=false; jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)./)){ jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;}})();

 

jquery.date_input.pack.css:

.date_selector, .date_selector *{width: auto;height: auto;border: none;background: none;margin: 0;padding: 0;text-align: left;text-decoration: none;}

.date_selector{background:#fbfbfb;border: 1px solid #ccc;padding: 10px;margin:0;margin-top:-1px;position: absolute;z-index:100000;display:none;border-radius: 3px;box-shadow: 0 0 5px #aaa;box-shadow:0 2px 2px #ccc;}

.date_selector_ieframe{position: absolute;z-index: 99999;display: none;}

.date_selector .nav{width: 17.5em;}

.date_selector .nav p{clear: none;}

.date_selector .month_nav, .date_selector .year_nav{margin: 0 0 3px 0;padding: 0;display: block;position: relative;text-align: center;}

.date_selector .month_nav{float: left;width: 55%;}

.date_selector .year_nav{float: right;width: 42%;margin-right: -8px;}

.date_selector .month_name, .date_selector .year_name{font-weight: bold;line-height: 20px;}

.date_selector .button{display: block;position: absolute;top: 0;width:18px;height:18px;line-height:16px;font-weight:bold;color:#5985c7;text-align: center;font-size:12px;overflow:hidden;border: 1px solid #ccc;border-radius:2px;}

.date_selector .button:hover, .date_selector .button.hover{background:#5985c7;color: #fff;cursor: pointer;border-color:#3a930d;}

.date_selector .prev{left: 0;}

.date_selector .next{right: 0;}

.date_selector table{border-spacing: 0;border-collapse: collapse;clear: both;margin: 0; width:220px;}

.date_selector th, .date_selector td{width: 2.5em;height: 2em;padding: 0 !important;text-align: center !important;color: #666;font-weight: normal;}

.date_selector th{font-size: 12px;}

.date_selector td{border:1px solid #f1f1f1;line-height: 2em;text-align: center;white-space: nowrap;color:#5985c7;background: #fff;}

.date_selector td.today{background: #eee;}

.date_selector td.unselected_month{color: #ccc;}

.date_selector td.selectable_day{cursor: pointer;}

.date_selector td.selected{background:#2b579a;color: #fff;font-weight: bold;}

.date_selector td.selectable_day:hover, .date_selector td.selectable_day.hover{background:#5985c7;color: #fff;}

 

转载于:https://www.cnblogs.com/007sx/p/6213411.html

weixin_33836874
关注
带农历的小日历插件
01-21
一个有黄道吉日的很方便、很简单的、很全面的带农历的小日历小插件
TMS_VCL_UI_Pack_10.5.0.2_for_Delphi_7-XE10.4_Full_Source
05-06
《TMS VCL UI Pack 10.5.0.2 for Delphi 7-XE10.4 Full Source: 深入解析组件库的精髓》 在Delphi编程领域，TMS VCL UI Pack是一款备受瞩目的组件库，为开发者提供了丰富的用户界面元素，极大地提高了开发效率和...
jQuery日期选择器插件date-input
热门推荐
无界编程
12-15 1万+
官网：http://jonathanleighton.com/projects/date-input/ 下载：http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.jshttp://github.com/jonleighton/date_input/raw/master/jquery.date_input.jshttp://git
JQuery日期选择器插件date-input
u012339998的专栏
05-26 241
JQuery日期选择器插件之date-input 官方网站：http://jonathanleighton.com/projects/date-input/ 下载地址： http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js ...
jQuery事件日历插件calendar--自适应版.js.rar_jq日历事件_js自适应日历_rem自适应布局_万年历 自适
09-23
《jQuery事件日历插件calendar--自适应版.js》是一个专为网页设计的JavaScript插件，主要用于实现功能丰富的日历组件。此版本是基于jQuery框架并经过优化，以适应不同屏幕尺寸，尤其适用于响应式布局的网站。在移动...
date.rar_JavaScript/JQuery_Java_
08-11
综合来看，这个压缩包可能包含了一个使用jQuery处理日期的JavaScript脚本（date.js），它可能是一个简单的日期选择器插件，或者是对JavaScript原生日期功能的扩展。开发者可能也提供了与Java后端交互的例子，展示了...
jquery-ui.rar_日历 jquery
09-14
除了日历功能，jQuery UI 还提供了时间选择器（Timepicker）插件，这使得用户能够方便地选择或输入时间。时间选择器可以与日历组件结合使用，形成完整的日期和时间选择工具。时间选择器同样具有丰富的配置选项，如...
Jquery 全年日历.rar_js 日历全年_日历
09-24
**jQuery 全年日历详解** 在Web开发中，日历控件是一个常见的需求，用于显示日期、选择日期或者进行日期相关的操作。本教程将详细讲解如何使用Bootstrap 3.3.5和jQuery来创建一个全年的日历展示，涵盖12个月份。 *...
jquery日历插件带农历和节假日效果
02-06
jquery日历插件带农历和节假日效果；可设置节假日期；
jQuery date_input日期选择器
07-07
jQuery date_input日期选择器 发一JQUERY插件jQuery date_input,是日期选择器..... 这个选择器是我已经修改过的,官方下载的选择界面是英文的,然后我把它又汉化了一下..根据中国国情,又修改了日期格式!! 效果图演示: http://www.darkcorps.cn/index.php?load=read&id=112
Jquery.DateSelector 下拉框日期控件
01-29
基于 jquery 封装的 日期控件。 详情 ： http://blog.csdn.net/moxie_yan/article/details/43274729
jQuery日期选择器DateSelecter(错误，不能用)
07-21
jQuery日期选择器DateSelecter(错误，不能用，不要下载) jQuery日期选择器DateSelecter(错误，不能用) jQuery日期选择器DateSelecter(错误，不能用)
日期选择控件-date_input
蚂蚁学Python
02-22 437
一款jquery插件date_input <script language="javascript" src="../../jquery-1.4.2.js"> </script> <script type="text/javascript" src="jquery.date_input.js"&gt...
jquery.tools.min.js插件dateinput两种运用方法
ywq5752952的专栏
01-09 1112
第一种：input  type为text的写法 jQuery(document).ready(function(){ $("#date").dateinput({format: 'yyyy-mm-dd',today:1}); }); 第二种：input  type为date的写法 jQuery(function () { $.tools.d
Jquery中offset()使用注意事项
ChasingDream
12-01 7365
Jquery中offset()使用中，常用的方法有：          $(selector).offset();          top: $(selector).offset().top;          left: $(selector).offset().left;          $(selector).offset({top:value,left:value});
jq.year_planner插件：轻松创建年度计划视图
该插件基于jQuery框架，允许用户通过简单的JavaScript代码在网页上展示和管理全年的计划。jq.year_planner特别适合于需要年度视图管理的项目，比如在线日程规划、日历应用或任何需要图形化展示日程的场景。" 知识点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值