jQuery插件的应用之

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>  

效果为: 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://127.0.0.1/wyypzf.html