jquery日历控件

最近弄了个简单jquery的日历控件，拿出来分享一下，先看效果图：

大家可以到下面的链接下载源文件代码：

http://download.csdn.net/detail/sunjava1/7466265

下面粘贴代码，先来主要的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]">«</span>' + ' <span class="month_name"></span> ' + '<span class="button next" title="[Page-Down]">»</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]">«</span>' + ' <span class="year_name"></span> ' + '<span class="button next" title="[Ctrl+Page-Down]">»</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);

再来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; width:180px;}
.date_selector_ieframe{position: absolute;z-index: 99999;display: none;}
.date_selector .nav{width: 11.0em;}
.date_selector .nav p{clear: none;}
.date_selector .month_nav,.date_selector .year_nav
{
margin: 0 0 1px 0;
padding: 0;
display: block;
position: relative;
text-align: center;
}
.date_selector .month_nav{float: left;width: 50%;}
.date_selector .year_nav{float: right;width: 50%;margin-right: -8px;}
.date_selector .month_name, .date_selector .year_name{font-weight: bold;font-size:13px;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:180px;}
.date_selector th, .date_selector td{width: 2.0em;height: 1.0em;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;background:#E8FFEF}
.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;}

<span style="font-size:18px;"><strong>最后如何使用：</strong></span>

<pre name="code" class="html"><BODY><!--日历使用-->Date:<input type="text" class="date_picker"><!--初始化日历组件一定要在日历文本框之后--><script language="javascript" type="text/javascript">$('.date_picker').date_input();</script></BODY>

好了大功告成！大家可以到下面的链接下载源文件代码：

http://download.csdn.net/detail/sunjava1/7466265

jquery日历控件相关推荐

Jquery 日历控件
非常好的Jquery日历控件 http://keith-wood.name/datepick.html 转载于:https://www.cnblogs.com/hubj/archive/2011/04 ...
9 款样式华丽的 jQuery 日期选择和日历控件
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...
精确到秒的JQuery日期控件，jquery日历插件，jquery日期插件
2019独角兽企业重金招聘Python工程师标准>>> 效果图如下: 首先在页面中引用一下库: <link type="text/css" href=&qu ...
JS日历控件优化(增加时分秒)
JS日历控件优化在今年7月份时候写了一篇关于 "JS日历控件" 的文章 , 当时只支持年月日的日历控件,现在优化如下: 1. 在原基础上支持 yyyy-mm- ...
bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
日历控件(bootstrap-datetimepicker.js)
最常用的日历控件 <script src="assets/js/jquery-1.11.1.js"> ...
前端常用插件之calender日历控件
前端常用插件之calender日历控件最近,发现一个插件--简单好用的页面日历控件,个人觉得有必要与大家分享一下,它就是calender日历控件. 准备环境: Bootstrap文件:bootstr ...
实用的签到、日程表日历控件(可扩展)
当初写这个控件主要是为了每日签到.当然你也可以改成事件(日程表)的日历控件,所有代码和样式都会分享给你. javascript代码极其简单,详细请下载demo文件(最下方有下载链接). 其实网上能搜索 ...
一个强大的js日历控件 FullCalendar 外加一堆可以直接运行的测试代码拿走不谢
资料地址 FullCalendar官网地址 FullCalendar文档 FullCalendar-v5.5.1在下地址 FullCalendar测试实例免费下载地址: https://downloa ...

jquery日历控件

jquery日历控件相关推荐

最新文章

热门文章