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写法
Sep 15 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 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
php4的session功能评述(二)
2006/10/09 PHP
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
js实现数组转换成json
2015/06/26 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python3多线程知识点总结
2019/09/26 Python
python 制作网站小说下载器
2021/02/20 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
十佳好少年事迹材料
2014/08/21 职场文书
七年级数学教学反思
2016/02/17 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android