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

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

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

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

下面这个是还没压缩的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=$("

var _header=$("

"

+"

"

+"«"

+""+_nowDate.year+"年"+_nowDate.month+"月"

+"»"

+"

"

+"

  • 日
  • 一
  • 二
  • 三
  • 四
  • 五
  • 六

"

+"

");

var _body=$("

"+self.getDays(_nowDate.year,_nowDate.month)+"

");

var _footer=$("

关闭

");

_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+="

  • ";

for(var i=1;i<=42;i++){

if(i<=_monthDay+_firstDay){

if(i%7===0){

returnStr+="

"+self.filterDay(i-_firstDay)+"";

}else{

returnStr+="

"+self.filterDay(i-_firstDay)+"";

}

}else{

if(i%7===0){

returnStr+="

";

}else{

returnStr+="

";

}

}

}

returnStr+="

";

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="

  • ";

for(var i=0;i<12;i++){

if((i+1)%3===0){

returnStr+="

"+self.switchMonth(i)+"";

}else{

returnStr+="

"+self.switchMonth(i)+"";

}

}

returnStr+='

';

return returnStr;

}

/*get siblings 12 years*/

self.getYears=function(year){

var returnStr="";

returnStr="

  • ";

for(var i=0;i<12;i++){

if((i+1)%3===0){

returnStr+="

"+(year+i)+"";

}else{

returnStr+="

"+(year+i)+"";

}

}

returnStr+='

';

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行代码。

;$(function(){

$('#input-date').dateField({

eventType:'click',

style:'default'

})

});

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

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

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

angular 万年历_jQuery实现的简单日历组件定义与用法示例相关推荐

  1. 微信小程序简单日历组件

    微信小程序简单的日历组件 代码: <!--日历组件--> <view class='cld'><view class="cld-top">< ...

  2. java循环的概念_Java数据结构之循环队列简单定义与用法示例

    本文实例讲述了Java数据结构之循环队列简单定义与用法.分享给大家供大家参考,具体如下: 一.概述: 1.原理: 与普通队列的区别在于循环队列添加数据时,如果其有效数据end == maxSize - ...

  3. html怎么制作万年历,js+html制作简单日历的方法

    新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 代码: 无标题文档 * {margin: 0;padding: 0} #calendar {width: 210px;margin: 100 ...

  4. vue展示日历 考勤展示_vue实现日历组件

    1.当前组件说明 一个用vue实现的简单日历组件,可以手动设置日历的宽高,未设置时,有默认宽高,设置后,其中的每个日期项的宽高可以根据设定的宽高自适应.可以设置当前选中日期,可以设置时间可用范围,可以 ...

  5. uni-app 日历组件的实现

    以下是一个基于 uni-app 的简单日历组件实现代码,包括了日历的基本布局和日期选择功能: <template><view class="calendar"&g ...

  6. html日历页面节假日_js+html制作简单日历的方法

    这篇文章主要为大家详细介绍了js html制作简单日历的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 ...

  7. 更简单的方法实现el-calendar日历组件中点击上个月、今天、下个月按钮时的点击事件

    网上查el-calendar相关的按钮点击事件文章,清一色都是在mounted挂载阶段通过document.querySelector绑定类名添加点击事件. 我想说为啥要弄得这么麻烦?el-calen ...

  8. 用vue 编写一个日历组件（非常详细-让日历简单起来）

    相信有不少小伙伴和我一样一提到日历就脑壳疼,然后去网上搜索好用的日历组件,如element-ui什么的,但是日历毕竟是别人开发出来的, 和自己家ui设计出来的功能样式毕竟不能100%相似,所以这个时候 ...

  9. java 日历签到功能_快速简单的实现在日历上签到的功能，不需要日历组件，带后端实现讲解...

    原本想使用日历组件,发现太麻烦,仅仅就签到而已,把当月的日期渲染一下就可以了,样式也可以自己随便写,用日历组件还得想办法改日历组件的样式. 以下使用到了vue,vant就用了弹窗.按钮,换成其他的也行 ...

  10. 基于Vue开发一个日历组件

    最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...

最新文章

  1. python有趣的小项目-这10个Python项目超有趣！
  2. Python 爬虫原理实现自动google翻译
  3. c++11-std::functionbind
  4. Redkale 让你重新认识Java
  5. python求均值标准差不用numpy_【Python】不用numpy用纯python求极差、平均数、中位数、众数与方差，python的打印...
  6. UE4中FString转UTF8及UTF8转FString
  7. IMU预积分公式推到及代码解析
  8. ActiveRecord::Fixture::FixtureError: table users has no column named activated_at.
  9. 向数据源DataTable 中添加新的一列,并向其赋值
  10. 房地产大数据管理系统——房地产大数据融合平台
  11. 房价会断崖式下跌吗？
  12. day2_数据运算和类型、列表、元组、字典
  13. 与计算机相关的伟人,计算机发展史上最有影响的伟人
  14. 使用函数求余弦函数的近似值 (15 分)
  15. 一些文学常识。。。。。。
  16. python网页爬虫xpath应用
  17. Java官方教程Java Tutorial
  18. c语言编程a4988驱动步进电机,A4988 步进电机驱动模块测试
  19. 模块“XXX.dll”加载失败
  20. OI回忆录第一章 逐梦之始

热门文章

  1. 关于fabricjs移动、放大等一些列操作后位置不对的问题
  2. Xamarin 初学，设计一个简单的美景展示App(只实现了部分功能)
  3. WASCE （基于geronimo ） 配置
  4. 三国志战略版：魏国新黑科技，程昱春华满宠
  5. 数据库mongodb效率测试
  6. 详细解析Linux /etc/shadow文件
  7. [编程题]山寨金闪闪 （面试题）
  8. TIdTCPClient
  9. html有序列表标签圆点,什么是无序列表、有序列表、定义列表？html列表标签学习笔记...
  10. 谷歌浏览器刷新快捷键