JQuery日历控件
日历控件最后一弹——JQuery实现,换汤不换药。原理一模一样,换了种实现工具。关于日历的终于写完了,接下来研究研究nodejs。嗯,近期就这点事了。
同样还是将input的id设置成calendar就可以使用这个控件了。
<input id="calendar" type="text" />
当然别忘了引用jquery库,必须在引用这个控件之前引用jquery库。
calendar_jquery.js源代码:
// JavaScript Document
$(document).ready(function(e) { var days = new Array("日","一","二","三","四","五","六");//星期
var today = new Date();//当天日期,备用
var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组
var month_small = new Array("4","6","9","11"); //包含所有小月的数组
var separator = "-";//间隔符 var cal_width = ($("#calendar").width() < 150)?150:$("#calendar").width();
var cal_height = $("#calendar").height();
var cal_X = $("#calendar").offset().left;
var cal_Y = $("#calendar").offset().top;
var pane_height = cal_width/7 - 1; $("#calendar").attr("readOnly","readOnly");
$("#calendar").css("cursor","pointer");
$("#calendar").bind("click",showCalendar);
$("#calendar").bind("focusout",hideCalendar); function hideCalendar(){
if($("#cal_body").length > 0){
$("#cal_body").remove();
}
} function showCalendar(){
if($("#cal_body").length > 0){
$("#cal_body").remove();
}
else{
var cal_body = $("<div></div>");
cal_body.attr("id","cal_body");
cal_body.css("position","absolute");
cal_body.css("z-index",10);
cal_body.offset({top:cal_Y + cal_height + 5,left:cal_X});
cal_body.width(cal_width + 1);
cal_body.height("auto");//auto
cal_body.css("overflow","hidden");
cal_body.css("border","solid 1px #CCC");
cal_body.mouseenter(function(e) {
$("#calendar").unbind("focusout");
});
cal_body.mouseleave(function(e) {
$("#calendar").focus();
$("#calendar").bind("focusout",hideCalendar);
});
$("#calendar").parent().append(cal_body); var line1 = $("<div></div>");
line1.width("100%");
line1.height(pane_height);
line1.css("background-color","#0FF"); var btn1 = $("<div></div>");
btn1.width(cal_width/3 - 3);
btn1.height(pane_height);
btn1.css("line-height",pane_height + "px");
btn1.css("text-align","center");
btn1.text("<");
btn1.css("float","left");
btn1.css("cursor","pointer");
btn1.click(function(e) {
if(isValidated()){
var old_year = parseInt($("#input_year").val());
if(old_year > 1960){
var year = old_year - 1;
var month = parseInt($("#input_month").val());
var val = year + separator + month + separator + 1;
init(val);
}
}
});
line1.append(btn1); var input_year = $("<input />");
input_year.attr("id","input_year");
input_year.width(cal_width/3);
input_year.height("70%");
input_year.css("float","left");
input_year.css("text-align","center");
input_year.bind("change",changed);
line1.append(input_year); var btn2 = $("<div></div>");
btn2.width(cal_width/3 - 3);
btn2.height(pane_height);
btn2.css("line-height",pane_height + "px");
btn2.css("text-align","center");
btn2.text(">");
btn2.css("float","left");
btn2.css("cursor","pointer");
btn2.click(function(e) {
if(isValidated()){
var old_year = parseInt($("#input_year").val());
if(old_year < 2050){
var year = old_year + 1;
var month = parseInt($("#input_month").val());
var val = year + separator + month + separator + 1;
init(val);
}
}
});
line1.append(btn2); var line2 = $("<div></div>");
line2.width("100%");
line2.height(pane_height);
line2.css("background-color","#0FF"); var btn3 = $("<div></div>");
btn3.width(cal_width/3 - 3);
btn3.height(pane_height);
btn3.css("line-height",pane_height + "px");
btn3.css("text-align","center");
btn3.text("<");
btn3.css("float","left");
btn3.css("cursor","pointer");
btn3.click(function(e) {
if(isValidated()){
var old_month = parseInt($("#input_month").val());
if(old_month > 1){
var year = parseInt($("#input_year").val());
var month = old_month - 1;
var val = year + separator + month + separator + 1;
init(val);
}
else {
var year = parseInt($("#input_year").val()) - 1;
var month = 12;
var val = year + separator + month + separator + 1;
init(val);
}
}
});
line2.append(btn3); var input_month = $("<input />");
input_month.attr("id","input_month");
input_month.width(cal_width/3);
input_month.height("70%");
input_month.css("float","left");
input_month.css("text-align","center");
input_month.bind("change",changed);
line2.append(input_month); var btn4 = $("<div></div>");
btn4.width(cal_width/3 - 3);
btn4.height(pane_height);
btn4.css("line-height",pane_height + "px");
btn4.css("text-align","center");
btn4.text(">");
btn4.css("float","left");
btn4.css("cursor","pointer");
btn4.click(function(e) {
if(isValidated()){
var old_month = parseInt($("#input_month").val());
if(old_month < 12){
var year = parseInt($("#input_year").val());
var month = parseInt($("#input_month").val()) + 1;
var val = year + separator + month + separator + 1;
init(val);
}
else {
var year = parseInt($("#input_year").val()) + 1;
var month = 1;
var val = year + separator + month + separator + 1;
init(val);
}
}
});
line2.append(btn4); cal_body.append(line1);
cal_body.append(line2); for(var i=0;i<7;i++){
var pane = $("<div></div>");
pane.addClass("pane");
pane.width(pane_height);
pane.height(pane_height);
pane.css("line-height",pane_height + "px");
pane.css("float","left");
pane.css("text-align","center");
pane.text(days[i]);
cal_body.append(pane);
} init($("#calendar").val());
}
} function init(val){
clearPane(); var temp_date;
var year;
var month;
var date; if(val == ""){
temp_date = today;
$("#calendar").val(today.toFormatString(separator));
}
else{
year = val.year();
month = val.month(separator);
date = val.date(separator);
temp_date = new Date(year,month,date);
} year = temp_date.getFullYear();
month = temp_date.getMonth() + 1;
date = temp_date.getDate();
temp_date.setDate(1); var start = temp_date.getDay() + 7;
var end; if(array_contain(month_big, month)){
end = start + 31;
}
else if(array_contain(month_small, month)){
end = start + 30;
}
else{
if(isLeapYear(year)){
end = start + 29;
}
else{
end = start + 28;
}
} for(var i = 7; i < start; i++){ var pane = $("<div></div>");
pane.addClass("pane");
pane.width(pane_height);
pane.height(pane_height);
pane.css("line-height",pane_height + "px");
pane.css("float","left");
pane.css("text-align","center");
$("#cal_body").append(pane);
} for(var i = start; i < end; i++){
var pane = $("<div></div>");
pane.addClass("pane");
pane.width(pane_height);
pane.height(pane_height);
pane.css("line-height",pane_height + "px");
pane.css("float","left");
pane.css("text-align","center");
pane.text(i - start + 1);
pane.css("cursor","pointer");
pane.mouseover(function(e) {
$(this).css("background-color","#0FF");
});
if(date == (i - start + 1))
pane.css("background-color","#0FF");
else{
pane.mouseleave(function(e) {
$(this).css("background-color","");
});
}
pane.click(function(){
$("#calendar").val(year + separator + month + separator + $(this).text());
$("#cal_body").remove();
});
$("#cal_body").append(pane); $("#input_year").val(year);
$("#input_month").val(month);
}
} //格式化输出
Date.prototype.toFormatString = function(separator){
var result = this.getFullYear() + separator + (this.getMonth() + 1) + separator + this.getDate();
return result;
}; //从格式化字符串中获取年份
String.prototype.year = function(){
var str = this.substring(0,4);
return str;
}; //从格式化字符串中获取月份
String.prototype.month = function(separator){
var start = this.indexOf(separator) + 1;
var end = this.lastIndexOf(separator);
return parseInt(this.substring(start, end)) - 1;
}; //从格式化字符串中获取日期
String.prototype.date = function(separator){
var start = this.lastIndexOf(separator) + 1;
return this.substring(start);
}; //判断数组array中是否包含元素obj的函数,包含则返回true,不包含则返回false
function array_contain(array, obj){
for (var i = 0; i < array.length; i++){
if (array[i] == obj)
return true;
}
return false;
} //判断年份year是否为闰年,是闰年则返回true,否则返回false
function isLeapYear(year){
var a = year % 4;
var b = year % 100;
var c = year % 400;
if( ( (a == 0) && (b != 0) ) || (c == 0) ){
return true;
}
return false;
} //清除方格
function clearPane(){
var limit = $(".pane").length;
for(var i=7; i < limit; i++){
$(".pane").eq(7).remove();
}
} //判断输入是否合法
function isValidated(){
var year = $("#input_year").val();
var month = $("#input_month").val();
if(isNaN(year) || isNaN(month)){
alert("请输入正确的年份/月份");
return false;
}
else{
if(year%1 != 0 || month%1 != 0){
alert("请输入正确的年份/月份");
return false;
}
else{
year = parseInt(year);
if(year < 1960 || year > 2050){
alert("请输入1960~2050之间的年份!");
return false;
}
else if(month < 1 || month >12){
alert("请输入正确的月份!");
return false;
}
else{
return true;
}
}
}
} //年份月份发生变化时处理函数
function changed(){
if(isValidated()){
var year = $("#input_year").val();
var month = $("#input_month").val();
var val = year + separator + month + separator + 1;
init(val);
}
}
});
JQuery日历控件的更多相关文章
- jQuery 日历控件 FullCalendar 初识
最近有个日程管理的需求,就学习了一下 FullCalendar 控件的一些基本知识,本文不是详细介绍该控件的 API 的文档,而是记录本人使用过程中的一些学习情况. 先看一下效果图 月/周/日视图 ...
- 仿微博的JQuery日历控件
实现原理主要是处理table,生成tr td,其中最重要的是如何找出每月第一天是星期几,然后就能对应出这个月的余下天数. 日历控件网上一搜一大把,但是我觉得自己写一遍还是有好处的.代码可以查看本页源代 ...
- 前端jQuery日历控件报错 $("#datepicker").datepicker is not a function
使用日历控件时,前端产生错误: $("#datepicker").datepicker is not a function 问题原因 前端在同一个页面,jQuery引入了两次. 解 ...
- Jquery自定义扩展方法(二)--HTML日历控件
一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看 ...
- jquery插件——日历控件
今天在网上有看到一个jquery插件——日历控件,不过之前也在柯乐义的网站上看到了(http://keleyi.com/ 推荐下) 这个插件看着比较大气,所以干脆也分享下,以后自己也好用一点儿 1.页 ...
- .net mvc页面UI之Jquery博客日历控件
摘要:最近在做一个博客系统,其他需要用到博客日历控件,网上搜索了很多资料,其中大部分都是javascript的,经过总结使用jquery实现了博客日历效果.代码如下: 原文链接转载请注明:http:/ ...
- javascript日历控件
以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就 ...
- 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”
接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...
- javascript实例学习之六—自定义日历控件
基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及t ...
随机推荐
- JS中的this
JS中的this 最近在学习JavaScript面向对象,其中有个难点就是关于this的问题. 关于this,我们要知道的两个问题,一个是this指向什么?另一个是this可以写在哪? 关于this的 ...
- 在Hibernate框架中详谈一级缓存
在学习Hibernate的过程中我们肯定会碰上一个名词---缓存,一直都听说缓存机制是Hibernate中的一个难点,它分为好几种,有一级缓存,二级缓存和查询缓存 今天呢,我就跟大家分享分享我所理解的 ...
- javascript组合继承
javascript继承有几种继承方式,现在来说说其中的组合继承. 组合继承是结合了原型链和借用构造函数这两种技术的继承方式,分别利用它们的长处,避免了短处.那就先说说这两种技术吧. 原型链 原型链 ...
- js事件委托
什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...
- Web系统开发构架再思考-前后端的完全分离
前言 前后端完全分离其实一直是Web开发人员的梦想,也一直是我的梦想,遥想当年,无论是直接在代码里面输出HTML,还是在HTML里面嵌入各种代码,都不能让人感到满意.期间的痛苦和纠结,我想所有Web开 ...
- CSS3过渡详解-遁地龙卷风
第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...
- git下载指定版本的代码
1. git fetch https://github.com/angular/angular.js.git v1.5.8 或 2. git pull https://github.com/angul ...
- Blink, 通向哈里·波特的魔法世界
<哈里·波特>的故事里面,魔法界的新闻报纸都是动画的,配图带有动画效果.能够回放新闻的主要场景. 初次看到这个,感觉还挺新鲜的.不过现在,Blink 这样的 App 可以让这个魔法世界的幻 ...
- SharePoint 2016 图文安装教程
前言 SharePoint 2016如约而至,之前也装过预览版,但是这次是正式版,还是分享一个完整的安装过程给大家,希望能给有需要的人有所帮助. 1.首先安装操作系统,我这里是Windows Serv ...
- 前端框架bootstrap 表单和导航菜单的 Demo(第二篇)
表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...