jquery插件 日历的应用详解
武骁
日历 datepicker
在页面开发中，经常遇到需要用户输入日期的操作。通常的操作是提供一个文本框，这样的操作不方便，影响用户的体验，如果使jquery插件中的日历，这些问题就会迎刃而解。
常用参数：
ChangeMoth :设置一个布尔值，如果为true则可以在标题处出现一个下拉选项，可以选择月份，默认为false
Changeyear:设置一个布尔值，如果为true则可以在标题处出现一个下拉选项，可以选择年份，默认为false
ShowButtonPancl:设置一个布尔值，如果为true，则在日期的下面显示一个面板，其中有两个按钮，一个为“今天”，另一个为“关闭” 默认值为false，表示不显示
CloseText：设置关闭按钮上的文字信息，这项设置的前提是ShowButtonPancl:设置必须为true，否则显示不了效果
dateFormat：设置显示在文本框中的日期格式
datefalutDate：设置一个默认日期值，默认日期是在当前的日期上加减天数
showAnim：设置显示弹出或隐藏日期选择窗口的方式
showWeek：设置一个布尔值，如果为true，则可以显示每天对应的星期，默认值为false
yearRanagc：设置年份的范围
实例分析：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'acc.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="./js/jquery.ui.datepicker-zh-HK.js"></script>
<link rel="stylesheet"type="text/css" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css">
<script type="text/javascript">
$(document).ready(function(){
$.datepicker.setDefaults( $.datepicker.regional[ "zh-CN" ] );
$("#dp").datepicker({
changeMonth:true,//在日期的标题栏中是否出现下拉列表框 true 有 false 否
changeYear:true,//出现年下拉列表框
showButtonPanel:true, //在日期面板的下方出现两个按钮 默认值为false
closeText:"关闭",//showButtonPanel:true必须是true 才能看到效果
dateFormat:"yy-mm-dd",
defaultDate:-3,
showAnim:"slide",//日期界面出现的动画效果
showWeek:true, //显示周 当年中的第几周
firstDay:1, //默认为当年的第一天
yearRange:"2011:2012",//默认为前后10年
onSelect:function(dateText,inst){
//开始日期的最大值等于结束日期的最小数值
//设置结束日期的最小日期
$("#end").datepicker("option","minDate",new Date(dateText.replace(/\-/g,",")));
//$("#end").datepicker("option","minDate",new Date(dateText));
}
});
$("#end").datepicker({
changeMonth:true,//在日期的标题栏中是否出现下拉列表框 true 有 false 否
changeYear:true,//出现年下拉列表框
showButtonPanel:true, //在日期面板的下方出现两个按钮 默认值为false
closeText:"关闭",//showButtonPanel:true必须是true 才能看到效果
dateFormat:"yy-mm-dd",
defaultDate:-3,
showAnim:"slide",//日期界面出现的动画效果
showWeek:true, //显示周 当年中的第几周
firstDay:1, //默认为当年的第一天
yearRange:"2011:2012",//默认为前后10年
onSelect:function(dateText,inst){
//结束日期最小值 大于等于开始日期的最大值
$("#dp").datepicker("option","maxDate",new Date(dateText.replace(/\-/g,",")));
}
});
});
</script>
</head>
<body>
<div id="datepicker">
<form action="" method="get">
开始日期<input type="text" id="dp"/>
结束日期<input type="text" id="end"/>
</form>
</div>
</body>
</html>
类似资料：