Home >Web Front-end >JS Tutorial >jquery calendar plug-in datepicker usage analysis_jquery

jquery calendar plug-in datepicker usage analysis_jquery

WBOYOriginal: 2016-05-16 15:18:431856browse

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery uses oop mode class class usage example_jqueryNext article：jquery uses oop mode class class usage example_jquery

See more

jquery calendar plug-in datepicker usage analysis_jquery

Related articles