jquery calendar plug-in datepicker usage analysis

jquery calendar plug-in datepicker usage analysis_jquery

WBOY

Release： 2016-05-16 15:18:43

Original

1836 people have browsed it

The example in this article describes the usage of jquery calendar plug-in datepicker. Share it with everyone for your reference, the details are as follows:

I have used several calendar plug-ins, some are too fancy, some are too simple, some are incompatible with browsers, etc. None of them satisfied me. Later, a colleague recommended jquery.datepick to me. I downloaded the plug-in from the official website and tried it myself. It feels pretty good. The logic and style can be completely separated, and it is very flexible. It supports languages in 30 countries and can basically meet my requirements.

Here is the download address of this website: http://www.jb51.net/jiaoben/19622.html

Unzip jquery.datepick.package-3.5.2.zip. The default is English calendar. There is jquery.datepick-zh-CN.js in it. Adding this can change the English calendar into Chinese. Demo address ：http://demo.jb51.net/js/2011/jQuery_calendar/index.html

The sample code is as follows:

<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>

Copy after login

Note: There are many parameters to set in the datepick plug-in, which depends on personal needs. For details, please refer to jquery’s official website http://docs.jquery.com/UI/Datepicker#options

Readers who are interested in more content related to jQuery plug-ins can check out the special topic of this site: "Summary of common jQuery plug-ins and usage"

I hope this article will be helpful to everyone in jQuery programming.