首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery实现的简单日历组件定义与用法示例

Posted in jQuery onDecember 24, 2018

本文实例讲述了jQuery实现的简单日历组件定义与用法。分享给大家供大家参考，具体如下：

说到日历组件，网上一搜一大堆，各种插件啊、集成框架啊实在不少。但是插件有的不合需求，框架嘛依赖关系一大堆，比如jQueryUI、bootstrap等。其实现在我就是想要一个轻量级的日历组件，功能也不需要很强大，只要能兼容所有浏览器，能选择任意年份日期和星期就可以了。

jQuery实现的简单日历组件定义与用法示例

jQuery实现的简单日历组件定义与用法示例

jQuery实现的简单日历组件定义与用法示例

好了，废话不多说，直接上代码：

好了，先引入jQuery库。（发表一下感概：angularJS的数据双向绑定着实让我对jQuery的未来担忧了一阵子，不过jQuery毕竟存在的时间很久，API文档和应用方面实在太广泛了 * _ *，而且jQuery无可厚非是一款相当不错的DOM操作类库，至少我觉得段时间内这个地位无可动摇。所以大家还是大胆地用吧！）

<script type="text/javascript" src="./js/jQuery.min.js"></script>

下面这个是还没压缩的js文件，纯手写哦 ^_^

/*
 * jquery extend: dateField
 * author:jafeney
 * createTime:2015-8-28 （很久之前写的，拿出来炒下冷饭）
 */
jQuery.fn.extend({
  dateField:function(options,callback){
    var self=this,
      _self=$(this),
      _eventType=options.eventType || 'click',
      _style=options.style || 'default',
      _parent=$(this).parent(),
      _nowDate={
        year:new Date().getFullYear(),
        month:new Date().getMonth()+1
      },
      _switchState=0,
      _monthArray=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
      _daysArray=[31,28,31,30,31,30,31,31,30,31,30,31];
    /*init*/
    _self.on(_eventType,function(){
      /*before use this extend,the '_self' must have a container*/
      _self.parent().css('position','relative');
      /*create element as dateField's container*/
      var _container=$("<div class='dateField-container'></div>");
      var _header=$("<div class='dateField-header'>"
          +"<div class='dateField-header-btns'>"
          +"<span class='btn dateField-header-btn-left'>«</span>"
          +"<span class='btn dateField-header-datePicker'>"+_nowDate.year+"年"+_nowDate.month+"月</span>"
          +"<span class='btn dateField-header-btn-right'>»</span>"
          +"</div>"
          +"<ul class='dateField-header-week'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>"
          +"</div>");
      var _body=$("<div class='dateField-body'>"+self.getDays(_nowDate.year,_nowDate.month)+"</div>");
      var _footer=$("<div class='dateField-footer'><span class='btn dateField-footer-close'>关闭</span></div>");
      _container.append(_header).append(_body).append(_footer);
      _self.parent().append(_container);
      _self.parent().find('.dateField-container').show();
      /*do callback*/
      if(callback) callback();
    });
    /*some functions*/
    /*get any year and any month's days into a list*/
    self.getDays=function(year,month){
      var _monthDay=self.getMonthDays(year,month);
      var _firstDay=new Date(year+'/'+month+'/'+'01').getDay(); //get this month's first day's weekday
      var returnStr='';
      returnStr+="<ul class='dateField-body-days'>";
      for(var i=1;i<=42;i++){
        if(i<=_monthDay+_firstDay){
          if(i%7===0){
            returnStr+="<li class='dateField-select select-day last'>"+self.filterDay(i-_firstDay)+"</li>";
          }else{
            returnStr+="<li class='dateField-select select-day'>"+self.filterDay(i-_firstDay)+"</li>";
          }
        }else{
          if(i%7===0){
            returnStr+="<li class='dateField-select select-day last'></li>";
          }else{
            returnStr+="<li class='dateField-select select-day'></li>";
          }
        }
      }
      returnStr+="</ul>";
      return returnStr;
    }
    /*filter days*/
    self.filterDay=function(day){
      if(day<=0 || day>31) {
        return '';
      }else{
        return day;
      }
    }
    /*judge any year is LeapYear*/
    self.isLeapYear=function(year){
      var bolRet = false;
      if (0===year%4&&((year%100!==0)||(year%400===0))) {
        bolRet = true;
      }
      return bolRet;
    }
    /*get any year and any month's full days*/
    self.getMonthDays=function(year,month){
      var c=_daysArray[month-1];
      if((month===2) && self.isLeapYear(year)) c++;
      return c;
    }
    /*get this year's months*/
    self.getMonths=function(){
      var returnStr="";
      returnStr="<ul class='dateField-body-days dateField-body-months'>";
      for(var i=0;i<12;i++){
        if((i+1)%3===0){
          returnStr+="<li class='dateField-select select-month last' data-month='"+(i+1)+"'>"+self.switchMonth(i)+"</li>";
        }else{
          returnStr+="<li class='dateField-select select-month' data-month='"+(i+1)+"'>"+self.switchMonth(i)+"</li>";
        }
      }
      returnStr+='</ul>';
      return returnStr;
    }
    /*get siblings 12 years*/
    self.getYears=function(year){
      var returnStr="";
      returnStr="<ul class='dateField-body-days dateField-body-years'>";
      for(var i=0;i<12;i++){
        if((i+1)%3===0){
          returnStr+="<li class='dateField-select select-year last' data-year='"+(year+i)+"'>"+(year+i)+"</li>";
        }else{
          returnStr+="<li class='dateField-select select-year' data-year='"+(year+i)+"'>"+(year+i)+"</li>";
        }
      }
      returnStr+='</ul>';
      return returnStr;
    }
    /*formatDate*/
    self.formatDate=function(date){
      if(date.length===1 || date<10){
        return '0'+date;
      }else{
        return date;
      }
    }
    /*switch month number to chinese*/
    self.switchMonth=function(number){
      return _monthArray[number];
    }
    /*go to prev*/
    _parent.on('click','.dateField-header-btn-left',function(){
      switch(_switchState){
        /*prev month*/
        case 0:
          _nowDate.month--;
          if(_nowDate.month===0){
            _nowDate.year--;
            _nowDate.month=12;
          }
          $(this).siblings('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月');
          $(this).parent().siblings('ul').show();
          $(this).parent().parent().siblings('.dateField-body').html(self.getDays(_nowDate.year,_nowDate.month));
          break;
        /*next 12 years*/
        case 2:
          _nowDate.year-=12;
          $(this).parent().parent().siblings('.dateField-body').html(self.getYears(_nowDate.year));
          break;
        default:
          break;
      }
    });
    /*go to next*/
    _parent.on('click','.dateField-header-btn-right',function(){
      switch(_switchState){
        /*next month*/
        case 0:
          _nowDate.month++;
          if(_nowDate.month===13){
            _nowDate.year++;
            _nowDate.month=1;
          }
          $(this).siblings('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月');
          $(this).parent().siblings('ul').show();
          $(this).parent().parent().siblings('.dateField-body').html(self.getDays(_nowDate.year,_nowDate.month));
          break;
        /*next 12 years*/
        case 2:
          _nowDate.year+=12;
          $(this).parent().parent().siblings('.dateField-body').html(self.getYears(_nowDate.year));
          break;
        default:
          break;
      }
    });
    /*switch choose year or month*/
    _parent.on('click','.dateField-header-datePicker',function(){
      switch(_switchState){
        case 0:
          /*switch month select*/
          $(this).parent().siblings('ul').hide();
          $(this).parent().parent().siblings('.dateField-body').html(self.getMonths());
          _switchState=1;
          break;
        case 1:
          /*switch year select*/
          $(this).parent().parent().siblings('.dateField-body').html(self.getYears(_nowDate.year));
          _switchState=2;
          break;
        default:
          break;
      }
    });
    /*select a year*/
    _parent.on('click','.dateField-select.select-year',function(){
      if($(this).text()!==''){
        $(this).parent().children('.dateField-select.select-year').removeClass('active');
        $(this).addClass('active');
        _nowDate.year=$(this).data('year');
        $(this).parent().parent().siblings().find('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月');
        $(this).parent().parent().parent().find('.dateField-header-week').hide();
        $(this).parent().parent().html(self.getMonths());
        _switchState=1;
      }
    });
    /*select a month*/
    _parent.on('click','.dateField-select.select-month',function(){
      if($(this).text()!==''){
        $(this).parent().children('.dateField-select.select-month').removeClass('active');
        $(this).addClass('active');
        _nowDate.month=$(this).data('month');
        $(this).parent().parent().siblings().find('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月');
        $(this).parent().parent().parent().find('.dateField-header-week').show();
        $(this).parent().parent().html(self.getDays(_nowDate.year,_nowDate.month));
        _switchState=0;
      }
    });
    /*select a day*/
    _parent.on('click','.dateField-select.select-day',function(){
      if($(this).text()!==''){
        var _day=$(this).text();
        $(this).parent().children('.dateField-select.select-day').removeClass('active');
        $(this).addClass('active');
        var _selectedDate=_nowDate.year+'-'+self.formatDate(_nowDate.month)+'-'+self.formatDate(_day);
        _self.val(_selectedDate).attr('data-Date',_selectedDate);
        _self.parent().find('.dateField-container').remove();
        /*template code： just for this page*/
        $('#check-birthday').removeClass('fail').hide();
      }
    });
    /*close the dateFiled*/
    /*click other field to close the dateField (outclick event)*/
    $(document).on('click',function(e){
      var temp=$(e.target);
      if(temp.hasClass('dateField-container') || temp.hasClass('dateField-header-btn-left') || temp.hasClass('dateField-header-datePicker') || $(e.target).hasClass('dateField-header-btn-right') || $(e.target).hasClass('dateField-select') || $(e.target)[0].id===_self.attr('id')){
        ;
      }else{
        $('.dateField-container').remove();
        _switchState=0;
      }
    });
    return self;
  }
});

下面是我 写的简单的一套样式风格，有点模仿微信的风格。

/*dateField styles*/
/*reset*/
ul,li{
  list-style: none;
  padding:0;
  margin:0;
}
/*default*/
.dateField-container{
  position:absolute;
  width:210px;
  border:1px solid rgb(229,229,229);
  z-index:99999;
  background:#fff;
  font-size:13px;
  margin-top:0px;
  cursor: pointer;
  display:none;
}
.dateField-header{
  width:212px;
  position:relative;
  left:-1px;
}
.dateField-header-btns{
  width:100%;
  height:30px;
  text-align:center;
  background:rgb(243,95,143);
}
.btn{
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}
.dateField-header-btn-left{
  float: left;
  display:block;
  width:30px;
  height:30px;
  color:#fff;
  line-height:30px;
}
.dateField-header-btn-left:hover{
  background:rgb(238,34,102);
}
.dateField-header-datePicker{
  display:inline-block;
  width:120px;
  text-align:center;
  color:#fff;
  line-height:30px;
}
.dateField-header-datePicker:hover{
  background:rgb(238,34,102);
}
.dateField-header-btn-right{
  float: right;
  width:30px;
  height:30px;
  display:block;
  color:#fff;
  line-height:30px;
}
.dateField-header-btn-right:hover{
  background:rgb(238,34,102);
}
.dateField-header-week{
  clear:both;
  width:100%;
  height:26px;
}
.dateField-header-week li{
  float: left;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
}
.dateField-body{
  width:100%;
}
.dateField-body-days{
  clear: both;
}
.dateField-body-days li{
  float: left;
  width:30px;
  height:30px;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -moz-box-sizing:border-box;
  border-top:1px solid rgb(229,229,229);
  border-right:1px solid rgb(229,229,229);
  line-height:30px;
  text-align:center;
}
.dateField-body-days li:hover{
  color:#fff;
  background:rgb(243,95,143);
}
.dateField-body-days li.active{
  color:#fff;
  background:rgb(243,95,143);
}
.dateField-body-days li.last{
  border-right:0;
}
.dateField-footer{
  border-top:1px solid rgb(229,229,229);
  clear:both;
  width:100%;
  height:26px;
  font-size:12px;
}
.dateField-footer-close{
  margin-top:2px;
  display:inline-block;
  width:100%;
  height:22px;
  background:rgb(245,245,245);
  text-align: center;
  line-height:22px;
}
.dateField-footer-close:hover{
  background:rgb(238,238,238);
}
.dateField-select{
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  -moz-user-select:none;
}
.dateField-body-months{
}
.dateField-body-months li{
  width:70px;
  height:35px;
  line-height:35px;
}
.dateField-body-years li{
  width:70px;
  height: 35px;
  line-height: 35px;
}

到了最关键的时刻，怎么使用呢？嘿嘿，就2行代码。

<!-- input group -->
  <div class="input-group">
    <input type="text" id="input-date" class="input-text">
  </div>
  <!--end input group-->
  <script type="text/javascript">
    ;$(function(){
      $('#input-date').dateField({
        eventType:'click',
        style:'default'
      })
    });
  </script>

gitHub地址 https://github.com/Jafeney/dateField

感兴趣的朋友还可使用如下在线工具测试上述代码运行效果：

在线HTML/CSS/JavaScript前端代码调试运行工具：
http://tools.3water.com/code/WebCodeRun

在线HTML/CSS/JavaScript代码运行工具：
http://tools.3water.com/code/HtmlJsRun

jQuery实现的简单日历组件定义与用法示例

- Author -

Jafeney

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 #jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
jQuery实现点击旋转，再点击恢复初始状态动画效果示例
Dec 11 #jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 #jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 #jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
jQuery选择器选中最后一个元素，倒数第二个元素操作示例
Dec 10 #jQuery
分区(2) 路由(1) 乱码(3) Scheduled(1) 扫雷(1) router(1) 抽象类(1) Date(1) 驱动模型(1) 接口(1)
You might like
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP对称加密算法（DES/AES）类的实现代码
2017/11/14 PHP
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
python 实现插入排序算法
2012/06/05 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python中字符编码简介、方法及使用建议
2015/01/08 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python查看列的唯一值方法
2018/07/17 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
美国杂志订阅折扣与优惠网站：Magazines.com
2016/08/31 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
美术教师自我鉴定
2014/02/12 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
四风问题查摆材料
2014/08/25 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
2016教师国培研修感言
2015/12/08 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis