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 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 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面试题集锦
2012/03/08 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
php 中的closure用法详解
2017/06/12 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python键盘输入转换为列表的实例
2018/06/23 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
django 模版关闭转义方式
2020/05/14 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
网络事业创业计划书范文
2014/01/09 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
产品发布会策划方案
2014/05/12 职场文书
行政助理岗位职责
2015/02/10 职场文书
留学推荐信怎么写
2015/03/26 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python