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 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 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启动时候提示PHP startup的解决方法
2013/05/07 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
python中常用的九种预处理方法分享
2016/09/11 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
python实现车牌识别的示例代码
2019/08/05 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
python Pexpect模块的使用
2020/12/25 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
买房委托公证书
2014/04/08 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
廉政承诺书范文
2015/04/28 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
Spring中的@Transactional的工作原理
2022/06/05 Java/Android