日历控件datepicker的使用

每次使用日历控件总要花些工夫去找或着修改,这次把使用日历控件datepicker的过程记录如下,下次使用前看看,少花点工夫 ,基本直接就可以了。

datepicker是jquery写的一个UI的日历控件,所以datepicker的下载地址:
[url]http://jqueryui.com/download/[/url]这里包括各种jquery写的UI,datepicker是其中的一个。解压后进入jquery-ui-1.10.3/demos/datepicker,这里就查各种情景的datepicker的使用。先打开index.html就可以直接点击各种demo.


我们要做的就是下面几件事
A 把datepicker独立出来,包括使用的各个文件
B datepicker只有日期,没有时分钞,所以要用一个插件,完善datepicker

首先建一个文件夹比如叫datepicker-demo
把jquery-ui-1.10.3/下的themes和ui,demos.css都复制到新建的文件夹下,再把jquery-ui-1.10.3/demos/datepicker也复制到新建的文件夹下,

然后下载我们要使用的插件jQuery-Timepicker-Addon,下载之后把整个文件夹考到我们的datepicker-demo/datepicker下,ok一切文件就绪,我这里把jQuery-Timepicker-Addon重命名为timepicker-Addon,

这个时候进入datepicker-demo/datepicker下,以dropdown-month-year.html为例,用编辑器打开
把里面的文件修改为如下





jQuery UI Datepicker - Display month & year menus





















Date:




Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean changeMonth and changeYear options.





ok 就可以使用了

对于datepicker的其它情景的用法,可以在demo里找,然后修改相应的代码就可以了

下面的附件是我按照上面一步一步的做成的,下载后可以直接使用

对了,还有重要的一点要记下来就是,怎么换日历的皮肤,皮肤可以在[url]http://jqueryui.com/themeroller/[/url]这里下载,然后引入到使用的文件就可以了,我们上面使用的是一个叫sunny的,如果想换成其它的皮肤,可以下载以后找到相应的皮肤包,放到我们的themes包下面,在使用的页面,找到相应需要替换的文件修改成我们要使用的皮肤就可以了。

下面看看截图


[img]http://dl2.iteye.com/upload/attachment/0086/3012/a6cbf2fa-5264-361f-9a10-3b3fc52e03ae.png[/img]


[img]http://dl2.iteye.com/upload/attachment/0086/3014/1ceb6aed-6bfe-35e2-a73c-19f8908ac147.png[/img]

你可能感兴趣的:(jquery,datepicker)