一、相关参考:
http://docs.jquery.com/UI/Datepicker JQuery官网关于Datapicker的使用
http://jqueryui.com/demos/datepicker/ JQuery UI官网关于Datapicker的使用
二、准备工作:
下载
1、jQuery 1.6.1 Released http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/
2、jquery-ui-1.8.13.custom.zip http://jqueryui.com/download
三、实现
1、在eclipse中建立Dynamic Web Project,命名为myjquery。
2、在WebContent目录下建立Folder,命名为为js,拷入相关的js文件。
包括:
jquery-1.6.1.min.js (JQuery)
jquery-ui-1.8.13.custom.min.js (Datapicke)
jquery.ui.datepicker-zh-CN.js (中文化 jquery-ui-1.8.13.custom\development-bundle\ui\i18n 目录下)
3、将JQuery Ui 插件包 jquery-ui-1.8.13.custom 下的文件夹css拷入到项目的WebContent目录下。
代码(datepicker.jsp):
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>日历控件</title>
<link href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.1.min.js"></script>
<script src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy年mm月dd日',
autoSize: true
});
$('#datepicker').datepicker('option', $.datepicker.regional['zh-CN']);
});
</script>
<style type="text/css">
.ui-datepicker { width: 17em; padding: .2em .2em 0; font-size: 15px;} /*覆盖了jquery-ui-1.8.13.custom.css中的.ui-datepicker,用于调整大小*/
</style>
</head>
<body>
<h3>请选择日期:</h3>
<P>Date: <input id=datepicker type=text></P>
</body>
</html>
四、截图
分享到:
相关推荐
jquery datepicker日历控件支持多种颜色弹出日历 jquery datepicker日历控件支持多种颜色弹出日历
jquery.datePicker日历控件应用input:text文本框弹出日历表选择日期时间,设置默认显示日历表展示。jquery日历控件下载。
这个日历控件是目前最好用的jQuery日历控件,里面有Demo,只需导入JS文件,在页面上调用控件方法就可以轻松实现日历控件。
带时间的jquery日历控件 调用方法: <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <script src="./public/js/jquery-ui-timepicker-addon....
jQueryUIDatepicker–漂亮的jQuery日历控件
重构jquery-datepicker日历控件, ctrl+鼠标左键可任意点选日期、也可任意取消选中日期, shift+鼠标移动可选中鼠标滑过的所有日期, 最重要的是重构后还是保留了jquery-datepicker本身的功能,你可以到官网自定...
jQueryUI Datepicker是一个高度可定制的插件,可以很方便的为你的页面添加日期选择功能,你可以自定义日期的显示格式 以及要使用的语言。
jquery datepicker 日历显示控件 超牛 满足各种显示要求 请看例子
jQuery UI Datepicker 插件和timepicker 共同组成时分秒的日历控件,包含汉化,中文显示日历样式
jquery日历控件 <!DOCTYPE html> <title>jQuery UI Datepicker - Default functionality <link rel="stylesheet" href="theme/jquery.ui.all.css"> <script src="jquery-1.7.2.js"> <script src="ui/jquery....
jquery-ui中文日历控件,使用的时候记得先把文档编码改为UTF-8,否则中文显示乱码!
一个漂亮的利用 jQuery +ASP.NET实现的Web日历控件源程序代码,采用C#+ajax技术实现。
jQuery多功能日期时间选择器datepicker是一款支持多种日历模式的日期时间选择插件,功能已经十分全面。
jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日历表 jquery.datePicker日历控件应用input:text文本框弹出日历表选择日期时间,设置默认显示日历表展示。jquery日历控件下载。
jquery的日历控件,小巧方便 简单易用,只需一句话就可以完成复杂的日历控件调用 $('#datepicker').datepicker()。 内置开发版本,和各种ui控件,喜欢的朋友可以拿去研究
My97DatePicker日历控件的实例运用,通过官方文档整理。希望对你有所帮助!
点击文本框弹出日历的jquery方法,可以通过设置参数来实现不同的显示要求,只需将代码放置到一个js文件中然后按照示例使用即可
最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件,其中时间要设置为必选, 产品要叫日历...
My97日期控件 My97 DatePicker Ver 3.0.1 3.0.1修正的问题 1.修正与很多JS库(如prototype,JQuery,dwr等)的冲突问题 2.解决不能“后退”的问题 3.解决IE6中,今天和选中的日期没有以其它颜色显示的问题 4.解决日期...