Jquery UI 中datepicker使用_)在 datepicker.js 文件中,引入 jquery ui 插件中的 datepicker -优快云博客

本文链接：https://blog.youkuaiyun.com/xinxijishunongda/article/details/27065547

      jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。

          在使用jQuery ui的过程中，发现jQuery ui的功能很强大，其中日期选择插件datepicker是一个配置灵活的插件，我们可以自己定义其展开方式，包括日期格式、语言、限制日期选择范围、添加相关按钮以及其他导航等。具体步骤：（１）引入ｊｑｕｅｒｙ．ｊｓ；（２）引入ｕｉ下面的jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.datepicker.js；（３）如果想设置日历为中文形式，需要引入ｕｉ－＞ｉ１８ｎ下面的jquery.ui.datepicker-zh-CN.js；（４）在ＨＴＭＬ中需为ｉｎｐｕｔ　ｔｙｐｅ＝＂ｔｅｘｔ＂设置ＩＤ；（５）写ｊｓ代码，引入ｄａｔｅｐｉｃｋｅｒ定义的函数以及各参数的设置。（６）可引入ｊＱｕｅｒｙ　ｕｉ中相应的样式也可根据自己的需要修改样式。（如果需要显示时分秒：１需下载jquery-ui-timepicker-addon.js，并在页面加载；２页面添加样式
 
 .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }  
.ui-timepicker-div dl { text-align: left; }  
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }  
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }  
.ui-timepicker-div td { font-size: 90%; }  
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }  ；３$("#date").datetimepicker();／／显示时分秒　　$("#datetime").datepicker(); // 显示日期  $("#datetime").timepicker(); // 显示时分秒 
）

图１：

图２：

　　下面是本人做的完整实例，可供参考，若有什么问题望大家指正。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>datepicker</title>
 <link rel="stylesheet" href="jquery-ui-1.10.4.custom/development-bundle/themes/base/jquery.ui.all.css">

<link rel="stylesheet" href="jquery-ui-1.10.4.custom/development-bundle/demos/demos.css">
</head>
<body>
	<div><input type="text" id="date"></div>
</body>

<script src="jquery-ui-1.10.4.custom/js/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="jquery-ui-1.10.4.custom/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="jquery-ui-1.10.4.custom/development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="jquery-ui-1.10.4.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
　　<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-ui-timepicker-addon.js"></script>
	<script src="jquery-ui-1.10.4.custom/development-bundle/ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
 <script type="text/javascript">
$(function(){
／／１．简单引用的实现，实现的样式如图１：
　　　　$("#date").datepicker();
	２.可修改年月的样式实现，如图２：
　　　$("#date").datepicker({
		changeYear : true,
		changeMonth : true,
		numberOfMonths : 1,
		showButtonPanel: true
		});
});
／／３显示时分秒，如图３
$("#date").datetimepicker();
</script>

</html>

图３