jQuery插件实现的日历功能示例【附源码下载】
更新时间：2018年09月07日 15:56:13 作者：honey_tao
这篇文章主要介绍了jQuery插件实现的日历功能,结合完整实例形式分析了jQuery datepicker插件实现日历功能的相关操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery插件实现的日历功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net jQuery日历插件</title>
<!--引入jQuery类库文件-->
<script src="js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.datepicker-zh-CN.js"></script>
<!--引入Css样式类库文件-->
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="external nofollow" />
<style>
#startTime,#endTime{
/* background-color:red;*/
}
</style>
<script type="text/javascript">
$(function(){
//设置日历显示的采用的地区 是中国
$.datepicker.setDefaults( $.datepicker.regional[ "zh-CN" ] );
$("#startTime,#endTime").datepicker({
//altField:"#actualDate",
//altFormat:"DD, d MM, yy",
autoSize:false ,//自动调整大小的操作 改变的输入框的大小
changeMonth:false,//如果为true 弹出一个下拉的菜单
changeYear:false, //前边有默认10年 当前年份的 后边有默认10年组成的下拉菜单
dateFormat:"yy-mm-dd", //日期的格式 呈现在输入的文本框中
defaultDate:+1, //缺省的日期 + - 相对于当前的日期 计算
showWeek: true, //显示当前年的周数
firstDay:1, //当前年份开始的第一天
showOn:"button", //borth 既可以触发按钮 又可以触发文本框 弹出 日历 如果是button 只能触发button事件
buttonImage: "images/calendar.png", //设置按钮的图片
buttonImageOnly: true, //设置这按钮只显示图片效果 不要有button的样式
showAnim:"toggle", //弹出日历的效果
prevText:"上一月",
nextText:"下一月",
yearRange:"c-5:c+5", //年份的前后取值范围
//minDate:1,
//maxDate:25,
/*
结束日期的最小值 必须大于等于 开始日期的最大值
*/
//showOtherMonths: true, //显示当前月份日期的其他日期值
//selectOtherMonths: true, //显示当前月份日期的其他日期值 并且是可以选择的 默认是不可以选择的
numberOfMonths:1, //连续弹出3个月的日历
showButtonPanel:true,
closeText:"guan",
//gotoCurrent:true
onSelect:function(textDate,inst){
alert(textDate);
}
});
});
</script>
</head>
<body>
<div>演示日历的效果</div>
<!-- <div id="datepicker"></div>-->
开始日期:<input type="text" id="startTime" />
结束日期:<input type="text" id="endTime" />
</body>
</html>
附：完整实例代码点击此处本站下载。
PS：这里再为大家推荐几款时间及日期相关工具供大家参考：
在线日期/天数计算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
在线日期天数差计算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix时间戳(timestamp)转换工具：
http://tools.jb51.net/code/unixtime
网页万年历日历：
http://tools.jb51.net/bianmin/webwannianli
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了如何基于jQuery实现五角星评分,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。接下来通过本文给大家介绍jQuery插件datatables使用教程，感兴趣的朋友一起学习吧2016-04-04
jquery实现tab键进行选择后enter键触发click行为
本文主要介绍了jquery键盘事件实现tab键进行选择后enter键触发click行为的方法，这种使用场景为当首页有几个链接需要选择的时候，使用键盘就可以进行触发行为。下面跟着小编一起来看下吧2017-03-03
下面小编就为大家带来一篇运用jQuery写的验证表单(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
本文是对Jquery中AJAX POST与GET之间的区别。进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
:first：获取第一个元素，在一些特殊情况下还是蛮实用的，下面为大家详细介绍下:first的具体使用，感兴趣的朋友可以参考下2013-08-08
这篇文章主要介绍了jQuery解析XML文件同时动态增加js文件的方法,涉及jQuery Ajax调用及返回函数中增加js文件的相关使用技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了JQuery中的AJAX，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
好的web api应该在url里面有足够的信息，并且每个资源方法有它对应的url。2011-08-08
在toggle()方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这个函数轮番调用,在函数之间切换调用的时候相当的方便,接下来将会详细介绍toggle()方法的使用，感兴趣的你可不要错过了啊2013-02-02
最新评论