如何在Drupal中直接应用日历选择日期效果

日期选择，可以使用date模块，它里面集成了jquery ui的datepicker效果，不过默认样式一般，而且要安的模块不少。如果只想用datepicker效果的话，大可不必安这些模块。以下介绍在drupal中直接应用datepicker的方法：

首先，大家可自行研究下jquery ui，那可是个好东东... 如何提取出有用的文件也是一项很细的工作。附件中有我提取的所有要用到的文件，大家按我以下讲述的放置到指定位置即可。

我选取的 jquery ui 的theme是：redmond，如果你想换成其它样式，自行换掉相应的css和image，效果如下：

第一步，将附件中的css，js文件夹放到主题根目录下

第二步，添加以下代码到主题的css文件中，如style.css.

1	img.ui-datepicker-trigger  {

2	cursor:pointer;

3

}

第三步：添加以下代码到主题的script.js文件中。

01	$(document).ready(function(){

02

03	$('#edit-title').datepicker({

04	changeMonth: true, //加月份选择菜单

05	changeYear: true, //加年份选择菜单

06	showOn: 'both', buttonImage:'/drupal/sites/all/themes/simple/images/calendar.gif', buttonImageOnly: true, //关于加日历图标的信息

07	buttonText: 'Choose a date' //日历图标的文字信息

08

});

09	//禁止input的浏览器记录，以免影响到datepicker的效果

10	$("#edit-title").focus(function(){

11	$(this).blur();

12

});

13

});

注：此处以#edit-title为例，请换成其它需要应用 datepicker 的 textfield 的id

第四步，在主题的info文件中，添加以下内容：

view source

print?

1	stylesheets[all][]   = css/ui.all.css

2	scripts[] = js/ui.core.js

3	scripts[] = js/ui.datepicker.js

第五步，清缓存，看效果！

型动视觉摘自似水流云的博客，谢谢！