jQuery日历插件datepicker的详细用法

JQuery是一个不可多得的优秀的javascript脚本开发库，基于它的很多插件也非常标准和优秀。很遗憾错过了这个美丽的景色，比如插件日期选择器。

一般MIS系统前端，尤其是用户注册页面，会有“出生日期”等日期输入框。最简单的方法是使用一个input type='text'/标记，这有很多缺点：第一，它与数据库字段类型匹配；二是输入日期的合法性，比如“三月”或者闰年等等。再往前走，还有很多地方值得推敲。目前比较流行的是使用下拉菜单selectoption/option/select来构造，但这在交互性、复杂性和可移植性方面都不尽如人意，因为至少需要构造三个链接的下拉菜单，并且需要编写大量的脚本来处理日期的有效性。

约会者带来了美好的春天。让我们看看使用默认样式时的样子：

完全类似GUI的用户体验、炫目的动态显示效果、精准的日期控制和高度灵活的参数配置，都让datepicker受到了很多开发者的青睐，包括著名的google，其google calendar项目就使用了这个脚本。如果你感兴趣，你可以看看。顺便说一下，上图中的默认效果，用户只用javascript写一句话就可以实现。怎么样？让我们兴奋起来。跟着我：

1.无需下载jQuery的核心文件。作为一个轻量级插件，您只需要jQuery的min版本，然后下载datepicker(包括jQuery1.2.6_min)。你也可以从官方网站下载：http://marcgrabanski.com/pages/code/jquery-ui-datepicker.

2.用HTML引用两个下载的js:

脚本语言=' JavaScript ' src=' http : js/jquery-1 . 2 . 6 . min . js '/script script语言=' JavaScript ' src=' http : js/ui . datepicker . js '/script 3。将默认样式表文件引入到HTML中，这也在刚才的压缩包中。如果在官网下载，可以在首页下载这个CSS文件，也可以选择其他皮肤的CSS:

Link rel='样式表' href=' js/ui . datepicker . css ' type=' text/CSS ' media=' screen ' title='核心CSS文件' charset=' utf-8'/4。在HTML中插入一个文本字段，最好设置为只读，不接受用户手动输入，防止格式混乱。

id=' date input ' type=' text ' readonly=' readonly '/5。编写js代码达到最终效果。

脚本语言='javascript'$(文档)。ready(function() { $('#dateinput '))。datepicker()；});/script由此可见，一个日期输入文本字段基本完成，但它是英文的。根据不同的管理信息系统，一些目标群体是等级用户。建议将界面改为中文。您可以通过稍微改变一下刚才的功能来实现，如下所示：

脚本语言=' JavaScript' $(文档)。ready (function () {$ ('# dateinput '))。dateppicker({ dateformat : ' YY-mm-DD '，//日期格式，设置buttonimage:' calendar.gif '的图片路径，//按钮，设置buttonimageonly:true，//显示不带任何按钮的图像触发器.显示3360' both '，//触发条件，两者都意味着单击文本字段和图片按钮将生效。年范围：' 1990:2008 '，//年范围clearText:' Clear '，//不需要在下面详细写注释。呵呵，这些文字设置都是closeText:关闭’和prevText:上个月’。NextText: '下个月'，currenttext3360 ' '，monthnames : ['一月'，'二月'，'三月'，'四月'，'五月'，'六月'，'七月'，'八月'，'九月'，'。});/scriptOK，你完成了。根据我自己的要求，我写的页面代码如下，仅供参考。你自己试试。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/titlelink rel='样式表href=' js/ui。日期选择器。CSS ' type=' text/CSS ' media=' screen ' title='核心半铸钢钢性铸铁(Cast Semi-Steel)文件charset=' utf-8 '/脚本语言=' JavaScript ' src=' http : js/jquery-1。2 .6 .量滴js '/脚本脚本语言=' JavaScript ' src=' http 3360 js/ui。日期选择器。js '/脚本脚本语言就绪(函数(){ var yearFrom=new Date().getYear()-60 1900；var yearTo=新日期()。getYear()-1900年年18日；$('#dateinput ').日期选取器({ dateformat : ' YY-mm-DD '，buttonImage: 'calendar.gif '，buttonImageOnly: true，showOn: ' both '，年范围：年从' : '年到，clearText: '清除，壁橱： '关闭，prevText: '前一月，下一个文本： '后一月，currentText: ' '，monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], });});/script/headdy input id=' date input ' type=' text ' readonly=' readonly '/body/html以上就是关于jQuery日历插件日期选择器用法详细介绍，希望对大家的学习有所帮助。