日历插件：
在页面开发中，经常遇到需要用户输入日期的操作。通常的做法是，提供一个文本框，让用户输入，然后，编写代码验证输入的数据，检测其是否是日期型。这样比较麻烦，同时，用户输入日期的操作也不是很方便，影响用户体验。如果使用jQuery UI 中的datepicker日历插件，这些问题都可以迎刃而解。该插件调用的语法格式如下：
$(".selector").datepicker(options);
其中".selector" 表示DOM元素，一般指文本框，由于该插件的作用是提供日期选择，因此，常与一个文本框绑定，将选择后的日期显示在该文本框中。选项options是一个对象。
下面是一些参数：
changeMonth 设置一个布尔值，如果为true,则可以在标题处出现一个下拉选择框，可以选择月份，默认值为false
changeYear 设置一个布尔值，如果为true,则可以在标题处出现一个下拉选择框，可以选择年份，默认值为false
showButtonPanel 设置一个布尔值，如果为true, 则在日期的下面显示一个面板，其中有两个按钮；一个为“今天”，另一个按键为“关闭”，默认值为false,表示不显示。
closeText 设置关闭按钮上的文字信息，这项设置的前提是，showButtonPanel的值必须为true,否则显示不了效果。
dateFormat 设置显示在文本框中的日期格式，可设置为{dateFormat:'yy-mm-dd'},表示日期的格式为 年－月－日，如2012-10-1.
defaultDate 设置一个默认日期值，如{defaultDate:+7}, 表示，弹出日期选择窗口后，默认的日期是在当前日期加上7天
showAnim 设置显示弹出或隐藏日期选择窗口的方式。可以设置的方式有，“show"、"slideDown"、"fadeIn“，或者为"", 表示没有弹出日期选择窗口的方式。
showWeek 设置一个布尔值，如果为true,则可以显示每天对应的星期，默认值为false
yearRange 设置年份的范围，如{yearRange:'2000:2010'},表示年份下拉列表框的最小值为2000年，最大值为2010年，默认值为c-10;c+10,当前年份的前后10年。
下面是关于jQuery日历插件的实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--引入jQuery类库文件-->
<script language="javascript" type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入Css样式因库文件-->
<link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker({
altField:"#actualDate",
altFormat:"yy-mm-dd",
autoSize:false, //自动调整大小 默认为flase
changeMonth:true, //如果为true 弹出一个下拉菜单
changeYear:true, //前边有10年，当前年份的后有10年组成的下拉菜单
dateFormat:"yy-mm-dd", //改变日期的格式
showWeek:true,
firstDay:1, //肖前年份开始的第一天
showAnim:"toggle", //弹出日历的效果
prevText:"上一月",
nextText:"下一月",
yearRange:"c-5:c+5", //年份的前后取值范围
minDate:1,
maxDate:25,
});
});
</script>
</head>
<body>
<div>演示日历的效果</div>
<!--<div id="datepicker"></div>-->
<input type="text" id="datepicker" />
<input type="text" id="actualDate" />
</body>
</html>
注：该实例中的一些参数，上面没有给出说明。
2157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
