jQuery插件的应用之 --- 日历

ParadiserD

2012-03-28

jQuery插件的应用之 --- 日历

一介绍

（1）优点：在页面开发中，经常会遇到需要用户输入日期的操作，通常的做法是提供一个文本框，让用户输入，然后，再编写代码验证输入的数据，检测其是否是日期类型，这样比较麻烦，同时，用户输入日期的操作也不是很方便，影响用户体验。如果使用jQueryUI中的datepicker插件，这些问题就可以迎刃而解

（2）导入的js和css文件

jquery-1.7.1.min.js"
jquery-ui-1.8.18.custom.min.js"
jquery.ui.core.js"
jquery.ui.datepicker.js"
jquery.ui.widget.js"
jquery.ui.datepicker-zh-CN.js" 把界面的改为中文的所需要导入的包
jquery-ui-1.8.18.custom.css"

（3）功能实现

在页面中，当单机文本框时，通过datepicker插件弹出一个日期选择窗口，该窗口可以使用下拉列表框的方式选择年份与月份，并显示与日期相对应的星期。

二代码详解

1．首先来创建一个jsp页面

<body>
<div>
<form action="">
<input type="text" id="datepicker"/>
</form>
</div>
</body>

2. 然后用js代码来注册当点击id="datepicker"时触发的事件

<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker();
});
</script>
然后我们就可以向datepicker()中加入参数来修饰日期
（1）在日期的标题栏中显示下拉列表框
//在日期的标题栏中是否出现下拉选择框，选择日期中的月份，true代码有选择框
changeMonth : true,
changeYear : true//在日期的标题栏中出现下拉列表框显示年
（2）关闭弹出的日期框
//在日期面板的下方出现2个按钮，一个是tody，一个是关闭，默认值是不显示的
showButtonPanel : true,
//关闭的效果文字必须结合showButtonPanel:true来使用
closeText : "关闭"
（3）设定在文本框中的格式
dateFormat : "yy-mm-dd"
（4）设置日期的缺省值，在当前日期中加或减一天
defaultDate : "-3"
（5）设置日期出现和消失的动画效果，比如有slide，toggle
showAnim : "slide"
（6）现在当年中的第一周，在左边显示
showWeek : true
（7）默认fisrtDay是当年的第一天
firstDay : 1
（8）表示下拉框中的年份的范围
yearRange : "2011:2012"
（9）如果是两个选框，填写的是从哪一天到哪一天的话，要获取点击的值并判断值
onSelect : function(selectedDate) {
//获取当前对象this.id=dp minDate //开始日期的最小值
//获取 option的值是minDat或者是maxDate 根据dom对象的id
var option = this.id == "dep" ? "minDate" : "maxDate",
//获取当前日期的实例对象，每遍历一次就获取一次
instance = $( this ).data( "datepicker" ),
//获取日期 instance.settings 获取日期的值
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
alert(instance.settings);
//设置日期
dates.not( this ).datepicker( "option", option, date );
},
（10）在应用中还可能会用到点击图片或按钮弹出选择日期的对话框，会用到几下几个属性
//点击按钮时出发的事件
showOn:"button",
//向按钮上添加文本
buttonText:"选择日期",
//向按钮上添加图片
buttonImage:" images/calendar.gif",
//设置只显示图片，没有按钮
buttonImageOnly:true,
（11）还有就是补全所有的日期，但是是不可选的
//补全所有的
showOtherMonths:true,
//在当前月中，其他月的日期不可以选择，，默认为false
selectOtherMonths:false
（12）把显示的日期换成中文的格式，要导入包jquery.ui.datepicker-zh-CN.js，也可以加入$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);来声明
整体的代码为：
<script type="text/javascript">
//当页面加载完毕的时候触发的匿名函数
$(document).ready(function() {
$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);
//当点击的时候触发事件，点击的时候直接显示
//判断开始日期的最大值等于结束日期的最小指
var dates = $("#dep,#end").datepicker(
{
changeMonth : true,//在日期的标题栏中是否出现下拉选择框，选择日期中的月份，true代码有选择框，fals代码没有选择框
changeYear : false,//在日期的标题栏中出现下拉列表框显示年
showButtonPanel : true, //在日期面板的下方出现2个按钮，一个是tody，一个是关闭，默认值是不显示的
closeText : "关闭", //关闭的效果文字必须结合showButtonPanel:true来使用
dateFormat : "yy-mm-dd", //设定在文本框中的格式
defaultDate : "-3", //缺省值，在当前日期中加或减一天
showAnim : "slide", //设置动画效果 slide toggle
showWeek : true, //显示当年中的第几周,在最左边
firstDay : 1, //默认fisrtDay是当年的第一天
yearRange : "2011:2012", //表示下拉框中的年份的范围
onSelect : function(selectedDate) {
//获取当前对象this.id=dp minDate //开始日期的最小值
//alert(this);
//获取 option的值是minDat或者是maxDate 根据dom对象的id
var option = this.id == "dep" ? "minDate" : "maxDate",
//获取当前日期的实例对象，每遍历一次就获取一次
instance = $( this ).data( "datepicker" ),
//获取日期 instance.settings 获取日期的值
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
alert(instance.settings);
//设置日期
dates.not( this ).datepicker( "option", option, date );
},
//提示信息
prevText:"上一月",
nextText:"下一月",
//显示几个选择的日期
numberOfMonths:1,
//点击按钮时出发的事件
showOn:"button",
//向按钮上添加文本
buttonText:"选择日期",
//向按钮上添加图片
buttonImage:" images/calendar.gif",
//设置只显示图片，没有按钮
buttonImageOnly:true,
//补全所有的
showOtherMonths:true,
//在当前月中，其他月的日期不可以选择，，默认为false
selectOtherMonths:false
});
});
</script>