Jquery日历插件制作简单日历


Posted in Javascript onOctober 28, 2015

在页面开发中,经常遇到需要用户输入日期的操作。通常的做法是,提供一个文本框(text),让用户输入,然后,编写代码验证输入的数据,检测其是否是日期类型。这样比较麻烦,同时,用户输入日期的操作也不是很方便,影响用户体验。如果使用jQuery UI中的datepicker(日历)插件,这些问题都可以迎刃而解。该插件调用的<span style="color:#cc66cc;"><strong>语法格式</strong></span>如下: 

$(“.selector”).datepicker(options); 

其中”.selector”表示DOM元素,一般指文本框,由于该插件的作用是提供日期选择,因此常与一个文本框绑定,将选择后的日期显示在该文本框中,选择options是一个对象与前面插件中的options一样,通过改变其参数对应的值,从而实现插件功能的变化,在datepicker插件中,选择options常用参数如下 

1、changeMonth    设置一个布尔值,如果wietrue,则可以在标题处出现一个下拉选择框,可以选择月份,默认值为false 
2、changeYear  设置一个布尔值,如果为true,则可以在标题处出现一个下拉选择框,可以选择年份,默认为false 
3、showButtonPanel   设置一个布尔值,如果为true,则在日期的下面显示一个面板,其中有两个按钮;一个为“今天”,另一个按钮为“关闭”,默认值为false,表示不显示 
4、closeText   设置关闭按钮上的文字信息,这项设置的前提是,showButtonPanel的值必须为true,否则显示不了效果 
5、dateFormat   设置显示在文本框(text)中的日期格式,可设置为{dateFormat,'yy-mm-dd'},表示日期的格式为年-月-日,如2012-10-1 
6、defaultDate  设置一个默认日期值,如{defaultDate+7},表示,弹出日期选择窗口后,默认的日期是在当前日期上加上7天 
7、showAnim   设置显示弹出或隐藏日期选择窗口的方式。可以设置的方式有,“show”、“sildeDown”、“fadeln”后者“”,表示没有弹出日期选择窗口的方式 
8、showWeek  设置一个布尔值,如果为true,则可以显示每天对应的星期,默认值为false 
9、yearRange   设置年份的范围

最近在研究js插件的开发,以前看大神们,对插件都是信手拈来,随便玩弄,感觉自己要是达到那种水平就好了,就开始自己研究插件开发了。研究了一段时间之后,就开始写了自己的第一个日历插件,由于是初学插件开发,代码的可读性可能有点差,希望各位大神可以多提点意见,以后维护代码,让这个插件更加的完整。

下面就贴出代码。

首先,给插件来个整体的div容器

<div class="y-total"></div>

本人习惯给容器取class或id名时,加上自己独特的前缀,这样,有助于识别自己的代码,也避免与其他同事的样式冲突。

然后就是开始写样式,可以根据自己的需求来调整样式

.y-total{height:auto;border:px solid #;}
  .y-total .return-btn{height:px;}
  .y-total .return-btn>div{border-right: px solid #;border-bottom: px solid #;color: #;font-family: "Microsoft Yahei",PMingLiU,Verdana,Arial,Helvetica,sans-serif}
  .y-total .return-btn>div:nth-child(){border-right:px;}
  .y-total .prev-btn{cursor: pointer;width:%;float: left;text-align: center;}
  .y-total .time{cursor: pointer;float:left;width:%;text-align: center;}
  .y-total .next-btn{cursor: pointer;float:right;width:%;text-align: center;}
  .y-total .y-stop{position: absolute;margin-left: px;background-color: red;color: #fff;}
  .y-total #datatab{clear:both;width:%;}
  .y-total #datatab td {height:px;font-family: "Microsoft Yahei",PMingLiU,Verdana,Arial,Helvetica,sans-serif;color: #;border: px solid #DDD;font-size: px;text-align: center;}

第三步,就是插件的代码了

<script>
  (function($){
   var Beautifier = function(vals,options){
    this.vals = vals;
    this.defaults = {
    "width":"px"
    }
    this.p = $.extend({},this.defaults,options); 
    this.$div = $("<div class='return-btn'></div>");
   this.prev = $("<div class='prev-btn'>前一页</div>");
   this.time = $("<div class='time'></div>");
   this.next = $("<div class='next-btn'>后一页</div>");
   this.tab = $("<table id='datatab'><tr></tr></table>");
   }
 
   Beautifier.prototype = {
   getDate : function(){
    var vals = this.vals;
    var t = this.time.attr("class");
    var tab = this.tab.attr("id");
    this.$div.append(this.prev,this.time,this.next);
    $(this.p.$this).append(this.$div,this.tab).width(this.p.width);
    var i = getInfo(vals);
    $("."+t).text(vals.year+"-" + i[]+"-" + i[]);
    $(".prev-btn,.next-btn").click(function(){returnAction($(this),t,vals,tab)}); 
    setDateInfo(tab);
    init(vals,tab);
   }
   }
   /*加载时将日期放入td中*/
   function init(vals,tab){
    var w = new Date(vals.year+","+vals.month+","+).getDay()//获取本月第一天是星期几
    var l =(w==?:w-) + new Date(vals.year,vals.month,).getDate();//需要铺上td的个数
    var t = Math.ceil(l/);
    for(var i=; i<t; i++){
    $("#"+tab).append("<tr class='y-tr'></tr>");
    }
    $(".y-tr").each(function(){
    for(var i=; i<; i++){
     $(this).append("<td></td>");
    }
    })
    setvalue(vals,new Date(vals.year,vals.month,).getDate(),w);
   }
   function setvalue(val,l,w){
    for(var i=;i<l+;i++){
    var space = w==?i+-+:i+w-+;
    $("td").eq(space).text(i);
    if(i == val.day){
     $("td").eq(space).css("color","red"); 
    }
    }
   }
   function getInfo(vals){
    var info = [];
    info.push(vals.month > ? vals.month : "" + vals.month);
    info.push(vals.day > ? vals.day : "" + vals.day);
    return info;
   }
 
   function setDateInfo(tab){
   var m = ["","一","二","三","四","五","六","日"];
   for(var i=; i<; i++){
    $("#"+tab).find("tr:eq()").append("<td>星期"+m[i]+"</td>");
   }
   }
   /*上一页,下一页的点击事件*/
   function returnAction($this,t,val,tab){
    if($this.attr("class") == "prev-btn"){
     if(val.month < ){
     val.month =;
     val.year-=;
     }else{
     val.month-=;
     }
    }else if($this.attr("class") == "next-btn"){
     if(val.month > ){
     val.month =;
     val.year+=;
     }else{
     val.month+=;
     }
    } 
    var v = getInfo(val);
    $("."+t).text(val.year+"-"+v[]+"-"+v[]);
    $(".y-tr").remove();
    init(val,tab);
   } 
 
   $.fn.work = function(options){
   var t = new Date();
   var DateVal = {
    "year" : t.getFullYear(),
    "month" : t.getMonth()+,
    "day" : t.getDate()
   }
   var objs = new Beautifier(DateVal,options); 
   objs.getDate();
   }
  })(jQuery)
 </script>

那么,插件就差不多完成了,现在只需要调用插件的方法就可以了

<script>
  $(".y-total").work({
  "$this" : ".y-total",
  "width" : "px",//控制容器的宽度
  });
 </script>

效果如图:

 Jquery日历插件制作简单日历

Javascript 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
jquery validation插件表单验证的一个例子
Mar 03 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
js实现继承的5种方式
Dec 01 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 #Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 #Javascript
JavaScript多并发问题如何处理
Oct 28 #Javascript
JS实现双击屏幕滚动效果代码
Oct 28 #Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 #Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 #Javascript
jquery实现的动态回到顶部特效代码
Oct 28 #Javascript
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
JavaScript如何借用构造函数继承
2019/11/06 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
Python list和str互转的实现示例
2020/11/16 Python
毕业生自荐书
2014/02/03 职场文书
软件项目开发计划书
2014/05/01 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python