jquery日历插件datepicker用法分析
更新时间：2016年01月22日 12:25:12 作者：张映
这篇文章主要介绍了jquery日历插件datepicker用法,结合实例形式分析了jquery日历插件datepicker的定义与使用技巧,需要的朋友可以参考下
本文实例讲述了jquery日历插件datepicker用法。分享给大家供大家参考，具体如下：
我用过好几种日历插件，有的太花哨，有的太简单，有的浏览器不兼容等等，没有一个能让我感到满意的，后来同事给我推荐了jquery.datepick这个插件，我从官方网站下了一个，亲自做了一下，感觉相当的不错，逻辑和样式可以完全分开，并且非常的灵活，支持30个国家的语言，基本能满足我的要求。
这里给出本站下载地址：https://www.jb51.net/jiaoben/19622.html
解压jquery.datepick.package-3.5.2.zip，默认是英文的日历，里面有一个jquery.datepick-zh-CN.js，加上这个可以把英文的变以成中文的，演示地址：http://demo.jb51.net/js/2011/jQuery_calendar/index.html
示例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Datepicker</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript" src="jquery.datepick-zh-CN.js"></script>
<script type="text/javascript">
$(function() {
var nowdays = new Date();
var dateConfig = {
showOn: 'both', //二个都显示
buttonImage: 'calendar.gif', //加载图片
buttonImageOnly: true, //显示图片的地方有一个突出部分，这个就是隐藏那玩意的
changeFirstDay: false, //这个参数干什么的呢，星期一是日历的第一个，不可以改动的
numberOfMonths: 2, //显示二个月，默认一个月
minDate: nowdays, //显示最小时间是今天
dateFormat: 'yy-mm-dd', //日期格式
yearRange: '-20:+20' //前后20年，不过这根minDate是今天有冲突，自己去试吧。
};
$('#goodplugin').datepick(dateConfig);
$('#showdate').datepick(dateConfig);
});
</script>
<link type="text/css" href="smoothness.datepick.css" rel="stylesheet" />
</head>
<body>
<h1>jquery 日历插件举例</h1>
<br>
<a href="datepick1.html">样式1</a>
<br>
<a href="datepick2.html">样式2</a>
<br>
<a href="datepick3.html">样式3</a>
<br><br><br>
<div id="showdate"></div>
<br>
<br>
<div>左边直接显示，右边要点击<input type="text" id="goodplugin"/></div>
</body>
</html>
说明：datepick插件里面有好多参数要设置，这个要根据个人的需要了。具体请参考jquery的官方网址http://docs.jquery.com/UI/Datepicker#options
更多关于jQuery插件相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了一个简单的Tab切换组件实例，大家可以参考使用2013-11-11
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
这篇文章主要介绍了15个值得开发人员关注的jQuery开发技巧和心得,详细总结分析了jQuery常用的开发技巧,需要的朋友可以参考下2016-05-05
JQuery事件e参数的方法preventDefault()取消默认行为
JQuery事件的e参数的方法preventDefault()可以取消对象的默认行为，下有个不错的示例，大家可以参考下，希望对大家有所帮助2013-09-09
本篇文章给大家详细分享的是jquery+css3来写出熊猫tv导航的效果，以及代码分享，喜欢的朋友参考下。2018-02-02
这篇文章主要介绍了jquery实现的伪分页效果代码,涉及jQuery页面元素操作与数值计算的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
jQuery对事件系统的抽象与优化也是它的一大特色。本文仅从事件系统入手，简要分析一下jQuery为什么提供mouseenter和mouseleave事件，它们与标准的mouseover、mouseout事件有什么区别2011-11-11
jquery radio的取值_radio的选中_radio的重置方法
下面小编就为大家带来一篇jquery radio的取值_radio的选中_radio的重置方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
jackson解析json字符串,首字母大写会自动转为小写的方法
下面小编就为大家分享一篇jackson解析json字符串,首字母大写会自动转为小写的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了jQuery实现鼠标滑动切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了jQuery实现折叠、展开的菜单组效果代码,涉及jQuery针对页面元素属性动态操作的相关技巧,展开折叠效果平滑自然,需要的朋友可以参考下2015-09-09
最新评论