jquery日历插件datepicker用法分析

时间：2021-05-26

本文实例讲述了jquery日历插件datepicker用法。分享给大家供大家参考，具体如下：

我用过好几种日历插件，有的太花哨，有的太简单，有的浏览器不兼容等等，没有一个能让我感到满意的，后来同事给我推荐了jquery.datepick这个插件，我从官方网站下了一个，亲自做了一下，感觉相当的不错，逻辑和样式可以完全分开，并且非常的灵活，支持30个国家的语言，基本能满足我的要求。

这里给出本站下载地址：https:///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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章