jquery日历插件datepicker用法分析
本文实例讲述了jquery日历插件datepicker用法。分享给大家供大家参考,具体如下:
我用过好几种日历插件,有的太花哨,有的太简单,有的浏览器不兼容等等,没有一个能让我感到满意的,后来同事给我推荐了jquery.datepick这个插件,我从官方网站下了一个,亲自做了一下,感觉相当的不错,逻辑和样式可以完全分开,并且非常的灵活,支持30个国家的语言,基本能满足我的要求。
这里给出本站下载地址:https://www.nhooo.com/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>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>jQueryDatepicker</title>
<scripttype="text/javascript"src="jquery-1.3.2.js"></script>
<scripttype="text/javascript"src="jquery.datepick.js"></script>
<scripttype="text/javascript"src="jquery.datepick-zh-CN.js"></script>
<scripttype="text/javascript">
$(function(){
varnowdays=newDate();
vardateConfig={
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>
<linktype="text/css"href="smoothness.datepick.css"rel="stylesheet"/>
</head>
<body>
<h1>jquery日历插件举例</h1>
<br>
<ahref="datepick1.html">样式1</a>
<br>
<ahref="datepick2.html">样式2</a>
<br>
<ahref="datepick3.html">样式3</a>
<br><br><br>
<divid="showdate"></div>
<br>
<br>
<div>左边直接显示,右边要点击<inputtype="text"id="goodplugin"/></div>
</body>
</html>
说明:datepick插件里面有好多参数要设置,这个要根据个人的需要了。具体请参考jquery的官方网址http://docs.jquery.com/UI/Datepicker#options
更多关于jQuery插件相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。