jQuery UI -- 日历选择器

现在，这个demo中，其实我们已经实现了一个日期选择器的功能。

但我们知道 jQuery UI 的文件包是一系列部件的合集，，所以说，如果我们只希望借助 jQuery UI 来 实现一个日期选择器，我们没必要引入整个的 jQuery UI ，而只需要引入 datepicker 相关的文件即可。

1、关于CSS的部分，将我们引入的 css 文件:jquery-ui-1.10.3.custom.min.css

替换为:

jquery.ui.core.min.css

和

jquery.ui.theme.min.css

和

jquery.ui.datepicker.min.css。

jquery-ui-1.10.3.custom.min.css 的大小是27KB，而 jquery.ui.core.min.css 和 jquery.ui.theme.min.css 和 jquery.ui.datepicker.min.css 的大小一起是19KB。

2、关于JS的部分，将我们引入的 js文件:jquery-ui-1.10.3.custom.min.js

替换为:

jquery.ui.core.js

和

jquery.ui.datepicker.js。

jquery-ui-1.10.3.custom.min.js的大小是223KB，而jquery.ui.core.js 和 jquery.ui.datepicker.js 的大小一起是84KB。

这样，我们同样能实现一个日期选择器的功能，但是就没有 jQuery UI 其他部件的功能。

为了让日期选择器与我们的网站整体格调相似，我们先来看一下 datepicker() 样式的修改。

核心手段就是定位要修改部位的 class ，然后在自己的 css 中修改样式即可覆盖。下面列举几个例子:

/更改jQuery UI主题的对话框header的背景/

.ui-widget-header {

background:url(…/img/ui_header_bg.png);

}

/按钮正常状态的背景/

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {

background:url(…/img/ui_header_bg.png);

}

/日历UI的今天单元格样式/

.ui-datepicker-today .ui-state-highlight {

border:1px solid #eee;

color:#f60;

}

/日历UI的选定单元格样式/

.ui-datepicker-current-day .ui-state-active {

border:1px solid #eee;

color:#06f;

}

注意