jquery日历插件datepicker用法分析

前端技术 2023/09/01 JavaScript

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

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

这里给出本站下载地址：http://www.phpstudy.net/jiaoben/19622.html

解压jquery.datepick.package-3.5.2.zip，默认是英文的日历，里面有一个jquery.datepick-zh-CN.js，加上这个可以把英文的变以成中文的，演示地址：http://demo.phpstudy.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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/2378

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案