简单日历插件jquery.date_input.pack
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]">«</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);
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:;padding:;text-align: left;text-decoration: none;}
.date_selector{background:#fbfbfb;border: 1px solid #ccc;padding: 10px;margin:;margin-top:-1px;position: absolute;z-index:;display:none;border-radius: 3px;box-shadow: 0 0 5px #aaa;box-shadow:0 2px 2px #ccc;}
.date_selector_ieframe{position: absolute;z-index:;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:;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:;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:;}
.date_selector .next{right:;}
.date_selector table{border-spacing:;border-collapse: collapse;clear: both;margin:; 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;}
简单日历插件jquery.date_input.pack的更多相关文章
- 【UI插件】开发一个简单日历插件（上）
前言 最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来 而且也用于了这么多频道的东西,如果没有总结,没有整理,没 ...
- jQuery简单日历插件版
先来看demo:http://codepen.io/jonechen/pen/xOgZMz 插件代码: ; (function($) { var Calendar = function(ele, op ...
- 10个漂亮的jQuery日历插件下载【转载】
10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件 日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用 ...
- jquery双日历日期选择器bootstrap-daterangepicker日历插件
这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...
- jQuery插件之——简单日历
最近在研究js插件的开发,以前看大神们,对插件都是信手拈来,随便玩弄,感觉自己要是达到那种水平就好了,就开始自己研究插件开发了.研究了一段时间之后,就开始写了自己的第一个日历插件,由于是初学插件开发, ...
- jQuery插件实战之fullcalendar（日历插件）Demo
jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web ...
- 给开发者准备的 10 款最好的 jQuery 日历插件[转]
这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件,允许开发者们把这些漂亮的日历插件结合到自己的网站中.这些日历插件易用性都很强,轻轻松松的就可以把漂亮的日历插件装饰到你的网站了.希 ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- 被逼着写的jquery工作日管理日历插件
因为工作原因,在我刚进入新公司之后,立马要求让我做一个jquery的插件demo.我的天,我面试的可是.net工程师啊.虽然以前接触过js,jquery,但也只是接触过一丢丢啊,没办法,只好硬着头皮上 ...
随机推荐
- Socket网络编程 详细过程（转）
我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览网页时,浏览器的进程怎么与web服务器通信的?当你用QQ聊天时,QQ进程怎么与服务器或你好友所在的QQ进程通信?这些都得靠so ...
- vim设置文本宽度
'textwidth' 'tw' number (default 0) local to buffer ...
- js中push和join方法使用介绍
push和join方法想必大家并不陌生吧,在本文将为大家详细介绍下js中的push和join方法的使用.代码: <script type="text/javascript"& ...
- ILRewrite && how to write a profiler
Rewrite MSIL Code on the Fly with the .NET Framework Profiling API http://clrprofiler.codeplex.com/ ...
- Solr 数字字符不能搜索的一个问题
问题一: 测试人员告诉我数字不能被搜索.于是开始找原因: <fields> ***<field name="productName" type="tex ...
- Java IP地址字符串与BigInteger的转换, 支持IPv6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- html+js+css+接口交互+echarts实例一枚
1. 解决了echarts的展现 2. 解决了echarts全屏幕展现(width:100%;height:100%;) 3. 解决了向接口取数据问题 <!DOCTYPE html> &l ...
- malloc和free函数详解
一.malloc()和free()的基本概念以及基本用法: 1.函数原型及说明: void *malloc(long NumBytes):该函数分配了NumBytes个字节,并返回了指向这块内存的指针 ...
- 面试-存储过程与Insert的性能比较
相关资料: 1.http://blog.itpub.net/28713356/viewspace-1220826/2.http://www.west.cn/www/info/28183-1.htm 1 ...
- postgres入门介绍
mysql被oricle公司收购以后,PG就成了比较流行的开源数据库的首选,而且heroku上面不支持mysql,但是却大力支持PG,所以说,不得不学学PG,并非迫不得已的样子,至少以后PG会比较流行 ...