首页
所有分类
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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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
xhunter1.sys(1) 华为(1) Debian(1) RustDesk(1) 蓝牙(1) 蓝牙耳机(1) HarmonyOS(1) 鸿蒙(2) 虚拟键盘(1) 鸿蒙3.0(1)
You might like
基于php-fpm 参数的深入理解
2013/06/03 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
实例解析php的数据类型
2018/10/24 PHP
Javascript开发包大全整理
2006/12/22 Javascript
javascript this用法小结
2008/12/19 Javascript
JavaScript XML操作 封装类
2009/07/01 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
Python的mysql数据库的更新如何实现
2017/07/31 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python的concat等多种用法详解
2018/11/28 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
深入了解Python enumerate和zip
2020/07/16 Python
The North Face北面荷兰官网：美国著名户外品牌
2019/10/16 全球购物
收银员的岗位职责范本
2014/02/04 职场文书
学校安全生产承诺书
2014/05/23 职场文书
国际贸易专业求职信
2014/06/04 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
后勤工作个人总结
2015/02/28 职场文书
电影建国大业观后感
2015/06/01 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
nginx.conf配置文件结构小结
2022/04/08 Servers