jquery日历插件datepicker用法分析


Posted in Javascript onJanuary 22, 2016

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

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

这里给出本站下载地址:https://3water.com/jiaoben/19622.html

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

Javascript 相关文章推荐
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
jcrop基本参数一览
Jul 16 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
js简单设置与使用cookie的方法
Jan 22 #Javascript
prototype框架中美元符号$用法分析
Jan 22 #Javascript
详解javascript传统方法实现异步校验
Jan 22 #Javascript
jquery.validate提示错误信息位置方法
Jan 22 #Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 #Javascript
jQuery简单获取键盘事件的方法
Jan 22 #Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 #Javascript
You might like
php实现的AES加密类定义与用法示例
2018/01/29 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python的time模块中的常用方法整理
2015/06/18 Python
20招让你的Python飞起来!
2016/09/27 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python使用Matlab命令过程解析
2020/06/04 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
详解Python中的文件操作
2021/01/14 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL