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 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
jQuery 入门讲解1
Apr 15 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
js数组依据下标删除元素
Apr 14 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 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
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php中使用url传递数组的方法
2015/02/11 PHP
php实现插入排序
2015/03/29 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
javascript 关闭IE6、IE7
2009/06/01 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
JS实现图片切换效果
2018/11/17 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
Django中Forms的使用代码解析
2018/02/10 Python
Sanic框架配置操作分析
2018/07/17 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
应用心理学个人求职信范文
2013/12/11 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
详解MySQL 用户权限管理
2021/04/20 MySQL
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS