jQuery插件datepicker的使用详解_第1页
jQuery插件datepicker的使用详解_第2页
jQuery插件datepicker的使用详解_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

jQuery是一款不可多得的非常优秀的javascript脚本开发库，而基于其上的很多插件也是非常规范和卓越的，如果错过这番美景真是太可惜了，比如datepicker这个插件。一般MIS系统的前端，尤其是用户注册页面，都会有诸如“出身年月”的日期输入框，最简单的做法就是使用一个<inputtype="text”/>标签，这样做的弊端有很多：首先是与数据库字段类型的匹配、其次是输入日期的合法性如“13月”或者闰年等等问题，如果深入下去还有非常多的地方值得推敲。当前比较流行的做法是使用下拉菜单<select><option></option></select>来构造，但是这样做无论交互性、复杂度和可移植性都不尽如人意，因为至少需要构建3个联动的下拉菜单，需要自己编写大量的脚本处理日期合法性。datepicker带来了美好的春天，先看看使用默认样式时它的样子：完全GUI般的用户体验，炫目的动态展现效果，精确的日期控制和高度的灵活的参数配置，这一切使得datepicker受到众多开发者的青睐，其中包括大名鼎鼎的google，在其googlecalendar项目中就使用了这个脚本，有兴趣可以去看看。顺便啰嗦一句，上图的默认效果，在javascript中，用户只需写一句话就可以实现了，怎么样，心动了吧，followme：下载jQuery核心文件就不用说了吧，datepicker是轻量级插件，只需jQuery的min版本就行了，然后下载datepicker(内含jQuery1.2.6_min)，您也可以到官方网站下载：/pages/code/jquery-ui-datepicker。在HTML中引用下载下来的两个js：<scriptlanguage="javascript"src="js/jquery-1.2.6.min.js"></script><scriptlanguage="javascript"src="js/ui.datepicker.js"></script>在HTML中引入默认样式表文件，这个文件也在刚刚的压缩包中，如果在官网下载，首页就有这个CSS文件下载，也可选择其他皮肤的CSS：<linkrel="stylesheet"href="js/ui.datepicker.css"type="text/css"media="screen"title="corecssfile"charset="utf-8”/>在HTML中插入文本域，最好设置成只读，不接受用户的手动输入，防止格式混乱，以id标记好。<inputid="dateinput"type="text"readonly="readonly"/>编写js代码，实现最终效果。<scriptlanguage="javascript">$(document).ready(function()($('#dateinput').datepicker();});</script>这样就基本完成一个日期输入文本域了，但是是英文的，根据不同的MIS系统，有的目标人群是上了年级的用户，建议将界面改成中文，可以如此操作，稍微改动一下刚刚的函数，likethis：<scriptlanguage="javascript">$(document).ready(function()($('#dateinput').datepicker((dateFormat:'yy-mm-dd',〃日期格式，自己设置buttonImage:'calendar.gif,//按钮的图片路径，自己设置buttonImageOnly:true,//Showanimagetriggerwithoutanybutton.showOn:'both',//触发条件，both表示点击文本域和图片按钮都生效yearRange:'1990:2008',//年份范围clearText:清除',//下面的就不用详细写注释了吧，呵呵，都是些文本设置closeText:'关闭'，prevText:前一月'，nextText:'后一月'，currentText:'',monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],});});</script>OK，大功告成，我根据自己的要求，写的页面的代码如下，仅供参考，自己尝试一下吧：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><linkrel="stylesheet"href="js/ui.datepicker.css"type="text/css"media="screen"title="corecssfile"charset="utf-8"/><scriptlanguage="javascript"src="js/jquery-1.2.6.min.js"></script><scriptlanguage="javascript"src="js/ui.datepicker.js"></script><scriptlanguage="javascript">$(document).ready(function()(varyearFrom=newDate().getYear()-60+1900;varyearTo=newDate().getY?ar()-18+1900;$('#dateinput').datepicker((dateFormat:'yy-mm-dd',buttonImage:'calendar.gif,buttonImageOnly:true,showOn:'both',yearRange:yearFrom+':'+yearTo,clearText:'清除'，closeText:'关闭'，prevText:前一月'，nextText:'后一月'，currentText:'',monthNames:['1月','2月','3月','4

人人文库> 全部分类> 行业资料 > 机电工程

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论