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>效果为: