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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
使用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
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
python实现控制台输出颜色
2021/03/02 Python
JS原生实现轮播图的几种方法
2021/03/23 Javascript
工业设计专业推荐信
2013/10/29 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
运动会方阵口号
2014/06/07 职场文书
环保小标语
2014/06/13 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
新兵入伍决心书
2015/09/22 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫