




已阅读5页,还剩12页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
JQuery官方地址:/你可以在这里下载到JQuery的核心框架的最新版本,包括未压缩的和已压缩的,不压缩的话有98K,简装压缩版只有15KDatepicker的演示地址:/repository/latest/demos/functional/#ui.datepicker包括自定义格式,资源本地化等,都有相应的源代码。Datepicker的下载地址:/download_builder/包括UI系列组件的下载地址,你可以在左边选择不同版本以及是否压缩,以何种方式压缩。这个页面的好处在于,你可以完全订制自己的脚本,本例中我们只需要Datepicker,所以只下载这一个和最上面的UI Core(The core of jQuery UI, required for all interaction modules and widgets)即可,它是所有UI插件的核心,不能不下。我是把它们两个分开下载的。78K的Datepicker压缩后只有23K。Datepicker的皮肤(CSS):/pages/code/jquery-ui-datepicker演示页面:/article/jquery-ui-datepicker-themes给个图:OK,接下来堆代码:JQuery官方地址:/你可以在这里下载到JQuery的核心框架的最新版本,包括未压缩的和已压缩的,不压缩的话有98K,简装压缩版只有15KDatepicker的演示地址:/repository/latest/demos/functional/#ui.datepicker包括自定义格式,资源本地化等,都有相应的源代码。Datepicker的下载地址:/download_builder/包括UI系列组件的下载地址,你可以在左边选择不同版本以及是否压缩,以何种方式压缩。这个页面的好处在于,你可以完全订制自己的脚本,本例中我们只需要Datepicker,所以只下载这一个和最上面的UI Core(The core of jQuery UI, required for all interaction modules and widgets)即可,它是所有UI插件的核心,不能不下。我是把它们两个分开下载的。78K的Datepicker压缩后只有23K。Datepicker的皮肤(CSS):/pages/code/jquery-ui-datepicker演示页面:/article/jquery-ui-datepicker-themes给个图:OK,接下来堆代码:然后在head节中加入:在body节中加入 $(document).ready(function() $(#).datepicker($.extend(, $.datepicker.regionalzh-CN, showStatus: true, showOn: both, buttonImage: /images/small/calendar.gif, buttonImageOnly: true ); );jQueryUI中Datepicker(日历)插件的介绍和使用Datepicker插件的属性:属性数据类型默认值说明altFieldString使用备用的输出字段,即将选择的日期以另一种格式,输出到另一个控件中,值为选择符,即要输出的控件altFormatStringaltField输出的格式,详细格式见formatDate方法appendTextString指定每个日期字段后面显示的文本autoSizeBooleanfalse是否自动调整控件大小,以适应当前的日期格式的输入buttonImageString指定弹出按钮图像的URL,若设置则buttonText将成为alt值buttonImageOnlyBooleanfalse是否将图像放在控件后面,作为触发器buttonTextString.指定触发按钮上显示的文本,showOn属性应设置为button或bothchangeMonthBooleanfalse是否使用下拉列表选择月份changeYearBooleanfalse是否使用下拉列表选择年份closeTextStringDone指定关闭链接显示的文本dateFormatStringmm/dd/yy指定显示日期的格式defaultDateDateStringNumbernull首次打开显示的日期,可以用Date对象指定一个实际日期,或指定距离今天的天数(如+7)、字符串(y表示年、m表示月、w表示周、d表示天,如+1m+7d)默认为null,表示今天durationNumberStringnormal日期选择器呈现的速度,可以为毫秒数firstDayNumber0设置每周的第一天,0表示星期日,1表示星期一等maxDateDateNumberStringnull可以选择的最大日期。null表示无限制格式见defaultDateminDateDateNumberStringnull可以选择的最小日期,null表示无限制格式见defaultDatenumberOfMonthsNumberArray1设置一次要显示几个月。可以为包含两个数字的数组,表示显示的行数和列数selectOtherMonthsBooleanfalse是否可以选择非当前月的日期,showOtherMonths属性必须为trueshortYearCutoffStringNumber+10设置截止的年份的值,若为数字(099)则直接使用其值,若是字符串,则转化为数字并与当前年份相加。当超过截止年份时,则被认为是上个世纪showAnimStringshow设置显示或隐藏的动画名showButtonPanelBooleanfalse是否显示按钮面板showCurrentAtPosNumber0指定在多月份显示时,当前月份位于何处,从左上方0算起showMonthAfterYearBooleanfalse是否在标题中的年份后显示月份showOnStringfocus设置触发选择器的事件名称showOtherMonthsBooleanfalse是否显示其他月份stepMonthsNumber1指定单击上月下月链接时,移动几个月yearRangeStringc-10:c+10设置下拉列表框中显示的年份范围,可以是相对今年(-nn:+nn)或相对于选择的年份(c-nn:c+nn)或绝对年份(nnnn:nnnn)第一个日历插件的使用实例首先导入需要的类库文件:首先进行页面代码的编写:htmlview plaincopy1. 2. 3. Date:4. 5. 然后使用js代码对插件进行调用javascriptview plaincopy1. :2. 3. 4. 5. $(function()6. 7. /插件的调用8. 9. $(#datepicker).datepicker(10. 11. /在这里进行插件的属性设置12. 13. );14. 15. );16. 17. 效果截图:下面通过实例对一些常用属性进行验证:1、altField :使用备用的输出字段,即将选择的日期以另一种格式,输出到另一个控件中,值为选择符,即要输出的控件 altFormat:altField输出的格式实例验证:页面代码:htmlview plaincopy1. 2. 3. Date:4. 5. 6. 7. Js代码:javascriptview plaincopy1. $(function()2. 3. $(#datepicker).datepicker(4. 5. altField:#alternate,6. 7. altFormat:DD,dMM,yy8. 9. );10. 11. );效果截图:2、showAnim:设置日期面板显示或隐藏的动画名js代码的编写:javascriptview plaincopy1. $(function()2. 3. $(#datepicker).datepicker();4. 5. $(#anim).change(function()6. 7. $(#datepicker).datepicker(option,showAnim,$(this).val();8. 9. );10. 11. );3、showButtonPanel:是否显示按钮面板Js代码:javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. showButtonPanel:true4. 5. );如图可以看到面板下方有两个按钮:点击“今天”会跳到今天的日期,点击“关闭”会关闭面板。4、dateFormat:指定显示日期的格式Js代码:javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. dateFormat:yy/mm/dd4. 5. );效果截图:通过图像可以看到,文本框中日期格式由以前的“yy-mm-dd”转变成了“by/mm/dd”。当然还有别的格式,可以根据自己的喜好进行设置。5、changeMonth:是否使用下拉列表选择月份changeYear:是否使用下拉列表选择年份在js代码中添加此属性:changeMonth:true或者changeYear:true其中标题栏的月份或者年份会出现下拉菜单的形式:6、yearRange:设置下拉列表框中显示的年份范围,可以是相对今年(-nn:+nn)或相对于选择的年份(c-nn:c+nn)或绝对年份(nnnn:nnnn)在js代码中添加属性:javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. changeYear:true,4. 5. yearRange:2011:20126. 7. );效果截图:从图中可以看到年的位置为下拉菜单的形式,其中下拉菜单只会出现2011与2012年的选项。注:yearRange属性只有在changeYear为true的情况下才使用。7、numberOfMonths:设置一次要显示几个月。可以为包含两个数字的数组,表示显示的行数和列数Js代码:javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. numberOfMonths:34. 5. );上面指定numberOfMonths为3,那么弹出的日历面板就会显示当前以及以后两个月,如图:8、showOn:设置触发选择器的事件名称buttonText:指定触发按钮上显示的文本,showOn属性应设置为button或bothbuttonImage:指定弹出按钮图像的URL,若设置则buttonText将成为alt值buttonImageOnly:是否将图像放在控件后面,作为触发器,如果设置为true那么按钮将只剩下图片作为按钮,是页面更加美观这里我编写三个文本框进行以上属性的对比:1)Js代码:javascriptview plaincopy1. $(#datepicker2).datepicker(2. 3. showOn:both,4. 5. buttonText:日历按钮6. 7. );效果截图:2)将按钮设置为图片:Js代码:javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. showOn:button,4. 5. buttonImage:images/calendar.gif,6. 7. buttonImageOnly:true8. 9. );未设置buttonImageOnly属性的效果:设置buttonImageOnly属性为true后:通过以上对比,可以理解buttonImageOnly属性的作用。9、minDate:可以选择的最小日期,null表示无限制maxDate:可以选择的最大日期。null表示无限制两者都是根据以当天日期为基础的。Js代码:javascriptview plaincopy1. $(function()2. 3. $(#datepicker).datepicker(4. 5. /表示以当天为准,只有在20天之前和10天之后的日期之间的时间可以选择6. 7. minDate:-20,8. 9. maxDate:+10D10. 11. );12. 13. );如下图在7号之前都不可选择(当前日期为27):jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表。代码示例如下:注:引入js脚本时,需先引入jQuery类库,后引入jQuery ui脚本下面为两种实现步骤:思路一:第一步实现两个datepicker组件。需要定义两个input标签,类型为text,并指定id属性HTML代码如下开始日期:结束日期:在js代码中得到两个input元素的jQuery对象,并将其转化为datepicker组件Js代码如下javascriptview plaincopy1. $(document).ready(function()2. 3. $(#start).datepicker();4. 5. $(#end).datepicker();6. 7. );实现以上操作后,在页面中点击文本框,如果出现datepicker则代表成功。第二步设置开始和结束日期当选择开始日期的值后,则结束日期的最小值应该就是开始日期;同理,当选择结束日期后,开始日期的最大值则应该是结束日期。我们可以利用datepicker中的onSelect属性来设置当选择指定日期后触发的事件,通过该事件来指定对应的datepicker最小日期或最大日期。Js代码如下javascriptview plaincopy1. $(#start).datepicker(2. 3. onSelect:function(dateText,inst)4. 5. $(#end).datepicker(option,minDate,dateText);6. 7. 8. 9. );10. 11. $(#e
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 观测云课件教学课件
- 课件需求教学课件
- 课件阅读教学课件
- 裁剪知识培训课件
- 2025年广西安全员A证模拟试题及答案
- 中国缩水甘油酸项目投资计划书
- 2025年全球化的技术转移机制
- 2025年全球海洋资源的可持续利用策略
- 2025年中考化学临近考试题及答案
- 2025人寿保险合同范本:人寿保险合同
- 2025年电工防爆作业理论全国考试题库(含答案)
- 重大隐患判定标准解读
- 给应届生面试技巧培训
- 微生物学检验技术 课件 16项目十六:细菌生物化学试验
- 光的反射定律教案及反思
- 高温熔融金属企业安全知识培训
- 医院培训课件:《直肠癌中医护理查房》
- 建筑工程临时用电管理台账表格
- 二年级上册劳动《洗红领巾》课件
- 深静脉血栓临床路径表单
- 光影中国学习通超星期末考试答案章节答案2024年
评论
0/150
提交评论