当前位置：移动技术网 > IT编程>开发语言>JavaScript > jQuery实现的简单日历组件定义与用法示例

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

2019年01月07日 | 移动技术网IT编程 | 我要评论

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

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

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

好了，先引入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前端代码调试运行工具：

在线html/css/javascript代码运行工具：

ps：这里再为大家推荐几款时间及日期相关工具供大家参考：

在线日期/天数计算器：

在线日期天数差计算器：

unix时间戳(timestamp)转换工具：

网页万年历日历：

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery日期与时间操作技巧总结》、《jquery拖拽特效与技巧总结》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》、《jquery选择器用法总结》及《jquery常用插件及用法总结》

希望本文所述对大家jquery程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑

今天在整合smm项目时：遇到两个错误，分享给各位Failed to load or instantiate Ta... [阅读全文]
vert实践五——Json？Protocol Buffer？FlatBuffers？

本节我们来比较一下Json、FlatBuffers、Protocol Buffer在vertx中使用时的占用资源... [阅读全文]
JS可断点续传文件上传实现代码解析

刚开始学习前端开发就碰到文件上传问题，还要求可断点续传。查了很多资料，发现h5的file api刚好可以满足我们的需求，也遇到了一些问题，于是记录下来为有同样需... [阅读全文]
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络

1.数据集验证神经网络2.图片验证神经网络3.说明正文：1.数据集验证神经网络上一篇博文已经训练好了神经网络模型... [阅读全文]
数据转为YOLO的txt数据格式

通过两个类来转换import osfrom xml.etree.ElementTree import dumpi... [阅读全文]
字典、集合、序列

字典用程序解答下面的题目字典的长度是多少请修改’java’ 这个key对应的value值为98删除 c 这个ke... [阅读全文]
06.字典、集合和序列

1.字典练习练习题：字典基本操作字典内容如下:dic = {‘python’: 95,‘java’: 99,‘c... [阅读全文]
多线程爬取狗妈表情包

通过多线程爬取狗妈表情包import requestsimport jsonfrom jsonpath impo... [阅读全文]
Python：数据导出到Excel（使用xlwt）

写在前面：前端ajax调用导出方法，ajax无法导出问题原因：ajax是无法直接导出excel的，因为ajax的... [阅读全文]
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地

爬虫代码如下：运行需要本地开启mongo服务器端，安装有谷歌浏览器及selenium对应版本的驱动文件#codi... [阅读全文]

网友评论


验证码：

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

2019年01月07日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论