jQuery UI:DatePicker 只有 CSS?

Posted

技术标签:

【中文标题】jQuery UI:DatePicker 只有 CSS?【英文标题】:jQuery UI: DatePicker ONLY CSS? 【发布时间】:2011-05-17 00:22:21 【问题描述】:

我同时使用 jQuery UI 手风琴和 datepicker。

手风琴效果很好,但是当我将 CSS 文件添加到页面(日期选择器需要它)时,一切都变得疯狂了。我看到脚本向两个小部件添加了各种类。有没有办法获得仅适用于日期选择器的单独 CSS?我尝试从他们的网站下载不同的文件,但没有任何效果。有什么建议吗?

【问题讨论】:

你能发布一些简单示例代码吗?或者可能是问题页面的链接? 【参考方案1】:

日期选择器的 CSS 是否会影响手风琴布局/可用性?最简单的解决方案是使用特定的类将每个项目包装在它自己的 div 中,然后使用该类来定制 CSS。

【讨论】:

【参考方案2】:

是的,你可以。使用 jquery UI themeroller scope.

在download section 的右侧栏中(在主题下拉菜单下)有一个打开高级菜单的链接。您为范围输入的值可以是自定义类 - 例如 .ui-stylized 或您希望应用 css 的任何类。如果您愿意,您甚至可以混合搭配整个主题。

我建议使用主题滚轮来修改任何 jquery ui 特定的 CSS。

干杯!

【讨论】:

不行,我试过用范围,不行。【参考方案3】:

仅限日期选择器 (jquery.ui.datepicker.css):

/*!
 * jQuery UI Datepicker 1.9.0
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Datepicker#theming
 */
.ui-datepicker 
    display: none;
    padding: .2em .2em 0;
    width: 17em;


.ui-datepicker .ui-datepicker-header 
    padding: .2em 0;
    position: relative;


.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next 
    height: 1.8em;
    position: absolute;
    top: 2px;
    width: 1.8em;


.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover  top: 1px; 

.ui-datepicker .ui-datepicker-prev  left: 2px; 

.ui-datepicker .ui-datepicker-next  right: 2px; 

.ui-datepicker .ui-datepicker-prev-hover  left: 1px; 

.ui-datepicker .ui-datepicker-next-hover  right: 1px; 

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span 
    display: block;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    position: absolute;
    top: 50%;


.ui-datepicker .ui-datepicker-title 
    line-height: 1.8em;
    margin: 0 2.3em;
    text-align: center;


.ui-datepicker .ui-datepicker-title select 
    font-size: 1em;
    margin: 1px 0;


.ui-datepicker select.ui-datepicker-month-year  width: 100%; 

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year  width: 49%; 

.ui-datepicker table 
    border-collapse: collapse;
    font-size: .9em;
    margin: 0 0 .4em;
    width: 100%;


.ui-datepicker th 
    border: 0;
    font-weight: bold;
    padding: .7em .3em;
    text-align: center;


.ui-datepicker td 
    border: 0;
    padding: 1px;


.ui-datepicker td span, .ui-datepicker td a 
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;


.ui-datepicker .ui-datepicker-buttonpane 
    background-image: none;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    margin: .7em 0 0 0;
    padding: 0 .2em;


.ui-datepicker .ui-datepicker-buttonpane button 
    cursor: pointer;
    float: right;
    margin: .5em .2em .4em;
    overflow: visible;
    padding: .2em .6em .3em .6em;
    width: auto;


.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current  float: left; 

/* with multiple calendars */

.ui-datepicker.ui-datepicker-multi  width: auto; 

.ui-datepicker-multi .ui-datepicker-group  float: left; 

.ui-datepicker-multi .ui-datepicker-group table 
    margin: 0 auto .4em;
    width: 95%;


.ui-datepicker-multi-2 .ui-datepicker-group  width: 50%; 

.ui-datepicker-multi-3 .ui-datepicker-group  width: 33.3%; 

.ui-datepicker-multi-4 .ui-datepicker-group  width: 25%; 

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header  border-left-width: 0; 

.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header  border-left-width: 0; 

.ui-datepicker-multi .ui-datepicker-buttonpane  clear: left; 

.ui-datepicker-row-break 
    clear: both;
    font-size: 0em;
    width: 100%;


/* RTL support */

.ui-datepicker-rtl  direction: rtl; 

.ui-datepicker-rtl .ui-datepicker-prev 
    left: auto;
    right: 2px;


.ui-datepicker-rtl .ui-datepicker-next 
    left: 2px;
    right: auto;


.ui-datepicker-rtl .ui-datepicker-prev:hover 
    left: auto;
    right: 1px;


.ui-datepicker-rtl .ui-datepicker-next:hover 
    left: 1px;
    right: auto;


.ui-datepicker-rtl .ui-datepicker-buttonpane  clear: right; 

.ui-datepicker-rtl .ui-datepicker-buttonpane button  float: left; 

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current  float: right; 

.ui-datepicker-rtl .ui-datepicker-group  float: right; 

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header 
    border-left-width: 1px;
    border-right-width: 0;


.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header 
    border-left-width: 1px;
    border-right-width: 0;


/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */

.ui-datepicker-cover 
    filter: mask(); /*must have*/
    height: 200px; /*must have*/
    left: -4px; /*must have*/
    position: absolute; /*must have*/
    top: -4px; /*must have*/
    width: 200px; /*must have*/
    z-index: -1; /*must have*/

仅手风琴(jquery.ui.accordion.css):

/*!
 * jQuery UI Accordion 1.9.0
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Accordion#theming
 */
.ui-accordion .ui-accordion-header 
    cursor: pointer;
    display: block;
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    position: relative;
    zoom: 1;


.ui-accordion .ui-accordion-icons  padding-left: 2.2em; 

.ui-accordion .ui-accordion-noicons  padding-left: .7em; 

.ui-accordion .ui-accordion-icons .ui-accordion-icons  padding-left: 2.2em; 

.ui-accordion .ui-accordion-header .ui-accordion-header-icon 
    left: .5em;
    margin-top: -8px;
    position: absolute;
    top: 50%;


.ui-accordion .ui-accordion-content 
    border-top: 0;
    overflow: auto;
    padding: 1em 2.2em;
    zoom: 1;

您还需要基本主题 (jquery.ui.theme.css):

/*!
 * jQuery UI CSS Framework 1.9.0
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/
 */


/* Component containers
----------------------------------*/

.ui-widget 
    font-family: Verdana, Arial, sans-serif/*ffDefault*/;
    font-size: 1.1em/*fsDefault*/;


.ui-widget .ui-widget  font-size: 1em; 

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button 
    font-family: Verdana, Arial, sans-serif/*ffDefault*/;
    font-size: 1em;


.ui-widget-content 
    background: #ffffff /*bgColorContent*/ url(images/ui-bg_flat_75_ffffff_40x100.png) /*bgImgUrlContent*/ 50% /*bgContentXPos*/ 50% /*bgContentYPos*/ repeat-x/*bgContentRepeat*/;
    border: 1px solid #aaaaaa/*borderColorContent*/;
    color: #222222/*fcContent*/;


.ui-widget-content a  color: #222222/*fcContent*/; 

.ui-widget-header 
    background: #cccccc /*bgColorHeader*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) /*bgImgUrlHeader*/ 50% /*bgHeaderXPos*/ 50% /*bgHeaderYPos*/ repeat-x/*bgHeaderRepeat*/;
    border: 1px solid #aaaaaa/*borderColorHeader*/;
    color: #222222/*fcHeader*/;
    font-weight: bold;


.ui-widget-header a  color: #222222/*fcHeader*/; 

/* Interaction states
----------------------------------*/

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
    background: #e6e6e6 /*bgColorDefault*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png) /*bgImgUrlDefault*/ 50% /*bgDefaultXPos*/ 50% /*bgDefaultYPos*/ repeat-x/*bgDefaultRepeat*/;
    border: 1px solid #d3d3d3/*borderColorDefault*/;
    color: #555555/*fcDefault*/;
    font-weight: normal/*fwDefault*/;


.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited 
    color: #555555/*fcDefault*/;
    text-decoration: none;


.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus 
    background: #dadada /*bgColorHover*/ url(images/ui-bg_glass_75_dadada_1x400.png) /*bgImgUrlHover*/ 50% /*bgHoverXPos*/ 50% /*bgHoverYPos*/ repeat-x/*bgHoverRepeat*/;
    border: 1px solid #999999/*borderColorHover*/;
    color: #212121/*fcHover*/;
    font-weight: normal/*fwDefault*/;


.ui-state-hover a, .ui-state-hover a:hover 
    color: #212121/*fcHover*/;
    text-decoration: none;


.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active 
    background: #ffffff /*bgColorActive*/ url(images/ui-bg_glass_65_ffffff_1x400.png) /*bgImgUrlActive*/ 50% /*bgActiveXPos*/ 50% /*bgActiveYPos*/ repeat-x/*bgActiveRepeat*/;
    border: 1px solid #aaaaaa/*borderColorActive*/;
    color: #212121/*fcActive*/;
    font-weight: normal/*fwDefault*/;


.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited 
    color: #212121/*fcActive*/;
    text-decoration: none;


/* Interaction Cues
----------------------------------*/

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight 
    background: #fbf9ee /*bgColorHighlight*/ url(images/ui-bg_glass_55_fbf9ee_1x400.png) /*bgImgUrlHighlight*/ 50% /*bgHighlightXPos*/ 50% /*bgHighlightYPos*/ repeat-x/*bgHighlightRepeat*/;
    border: 1px solid #fcefa1/*borderColorHighlight*/;
    color: #363636/*fcHighlight*/;


.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a  color: #363636/*fcHighlight*/; 

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error 
    background: #fef1ec /*bgColorError*/ url(images/ui-bg_glass_95_fef1ec_1x400.png) /*bgImgUrlError*/ 50% /*bgErrorXPos*/ 50% /*bgErrorYPos*/ repeat-x/*bgErrorRepeat*/;
    border: 1px solid #cd0a0a/*borderColorError*/;
    color: #cd0a0a/*fcError*/;


.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a  color: #cd0a0a/*fcError*/; 

.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text  color: #cd0a0a/*fcError*/; 

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary  font-weight: bold; 

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary 
    filter: Alpha(Opacity=70);
    font-weight: normal;
    opacity: .7;


.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled 
    background-image: none;
    filter: Alpha(Opacity=35);
    opacity: .35;


/* Icons
----------------------------------*/

/* states and images */

.ui-icon 
    background-image: url(images/ui-icons_222222_256x240.png)/*iconsContent*/;
    height: 16px;
    width: 16px;


.ui-widget-content .ui-icon  background-image: url(images/ui-icons_222222_256x240.png)/*iconsContent*/; 

.ui-widget-header .ui-icon  background-image: url(images/ui-icons_222222_256x240.png)/*iconsHeader*/; 

.ui-state-default .ui-icon  background-image: url(images/ui-icons_888888_256x240.png)/*iconsDefault*/; 

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon  background-image: url(images/ui-icons_454545_256x240.png)/*iconsHover*/; 

.ui-state-active .ui-icon  background-image: url(images/ui-icons_454545_256x240.png)/*iconsActive*/; 

.ui-state-highlight .ui-icon  background-image: url(images/ui-icons_2e83ff_256x240.png)/*iconsHighlight*/; 

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon  background-image: url(images/ui-icons_cd0a0a_256x240.png)/*iconsError*/; 

/* positioning */

.ui-icon-carat-1-n  background-position: 0 0; 

.ui-icon-carat-1-ne  background-position: -16px 0; 

.ui-icon-carat-1-e  background-position: -32px 0; 

.ui-icon-carat-1-se  background-position: -48px 0; 

.ui-icon-carat-1-s  background-position: -64px 0; 

.ui-icon-carat-1-sw  background-position: -80px 0; 

.ui-icon-carat-1-w  background-position: -96px 0; 

.ui-icon-carat-1-nw  background-position: -112px 0; 

.ui-icon-carat-2-n-s  background-position: -128px 0; 

.ui-icon-carat-2-e-w  background-position: -144px 0; 

.ui-icon-triangle-1-n  background-position: 0 -16px; 

.ui-icon-triangle-1-ne  background-position: -16px -16px; 

.ui-icon-triangle-1-e  background-position: -32px -16px; 

.ui-icon-triangle-1-se  background-position: -48px -16px; 

.ui-icon-triangle-1-s  background-position: -64px -16px; 

.ui-icon-triangle-1-sw  background-position: -80px -16px; 

.ui-icon-triangle-1-w  background-position: -96px -16px; 

.ui-icon-triangle-1-nw  background-position: -112px -16px; 

.ui-icon-triangle-2-n-s  background-position: -128px -16px; 

.ui-icon-triangle-2-e-w  background-position: -144px -16px; 

.ui-icon-arrow-1-n  background-position: 0 -32px; 

.ui-icon-arrow-1-ne  background-position: -16px -32px; 

.ui-icon-arrow-1-e  background-position: -32px -32px; 

.ui-icon-arrow-1-se  background-position: -48px -32px; 

.ui-icon-arrow-1-s  background-position: -64px -32px; 

.ui-icon-arrow-1-sw  background-position: -80px -32px; 

.ui-icon-arrow-1-w  background-position: -96px -32px; 

.ui-icon-arrow-1-nw  background-position: -112px -32px; 

.ui-icon-arrow-2-n-s  background-position: -128px -32px; 

.ui-icon-arrow-2-ne-sw  background-position: -144px -32px; 

.ui-icon-arrow-2-e-w  background-position: -160px -32px; 

.ui-icon-arrow-2-se-nw  background-position: -176px -32px; 

.ui-icon-arrowstop-1-n  background-position: -192px -32px; 

.ui-icon-arrowstop-1-e  background-position: -208px -32px; 

.ui-icon-arrowstop-1-s  background-position: -224px -32px; 

.ui-icon-arrowstop-1-w  background-position: -240px -32px; 

.ui-icon-arrowthick-1-n  background-position: 0 -48px; 

.ui-icon-arrowthick-1-ne  background-position: -16px -48px; 

.ui-icon-arrowthick-1-e  background-position: -32px -48px; 

.ui-icon-arrowthick-1-se  background-position: -48px -48px; 

.ui-icon-arrowthick-1-s  background-position: -64px -48px; 

.ui-icon-arrowthick-1-sw  background-position: -80px -48px; 

.ui-icon-arrowthick-1-w  background-position: -96px -48px; 

.ui-icon-arrowthick-1-nw  background-position: -112px -48px; 

.ui-icon-arrowthick-2-n-s  background-position: -128px -48px; 

.ui-icon-arrowthick-2-ne-sw  background-position: -144px -48px; 

.ui-icon-arrowthick-2-e-w  background-position: -160px -48px; 

.ui-icon-arrowthick-2-se-nw  background-position: -176px -48px; 

.ui-icon-arrowthickstop-1-n  background-position: -192px -48px; 

.ui-icon-arrowthickstop-1-e  background-position: -208px -48px; 

.ui-icon-arrowthickstop-1-s  background-position: -224px -48px; 

.ui-icon-arrowthickstop-1-w  background-position: -240px -48px; 

.ui-icon-arrowreturnthick-1-w  background-position: 0 -64px; 

.ui-icon-arrowreturnthick-1-n  background-position: -16px -64px; 

.ui-icon-arrowreturnthick-1-e  background-position: -32px -64px; 

.ui-icon-arrowreturnthick-1-s  background-position: -48px -64px; 

.ui-icon-arrowreturn-1-w  background-position: -64px -64px; 

.ui-icon-arrowreturn-1-n  background-position: -80px -64px; 

.ui-icon-arrowreturn-1-e  background-position: -96px -64px; 

.ui-icon-arrowreturn-1-s  background-position: -112px -64px; 

.ui-icon-arrowrefresh-1-w  background-position: -128px -64px; 

.ui-icon-arrowrefresh-1-n  background-position: -144px -64px; 

.ui-icon-arrowrefresh-1-e  background-position: -160px -64px; 

.ui-icon-arrowrefresh-1-s  background-position: -176px -64px; 

.ui-icon-arrow-4  background-position: 0 -80px; 

.ui-icon-arrow-4-diag  background-position: -16px -80px; 

.ui-icon-extlink  background-position: -32px -80px; 

.ui-icon-newwin  background-position: -48px -80px; 

.ui-icon-refresh  background-position: -64px -80px; 

.ui-icon-shuffle  background-position: -80px -80px; 

.ui-icon-transfer-e-w  background-position: -96px -80px; 

.ui-icon-transferthick-e-w  background-position: -112px -80px; 

.ui-icon-folder-collapsed  background-position: 0 -96px; 

.ui-icon-folder-open  background-position: -16px -96px; 

.ui-icon-document  background-position: -32px -96px; 

.ui-icon-document-b  background-position: -48px -96px; 

.ui-icon-note  background-position: -64px -96px; 

.ui-icon-mail-closed  background-position: -80px -96px; 

.ui-icon-mail-open  background-position: -96px -96px; 

.ui-icon-suitcase  background-position: -112px -96px; 

.ui-icon-comment  background-position: -128px -96px; 

.ui-icon-person  background-position: -144px -96px; 

.ui-icon-print  background-position: -160px -96px; 

.ui-icon-trash  background-position: -176px -96px; 

.ui-icon-locked  background-position: -192px -96px; 

.ui-icon-unlocked  background-position: -208px -96px; 

.ui-icon-bookmark  background-position: -224px -96px; 

.ui-icon-tag  background-position: -240px -96px; 

.ui-icon-home  background-position: 0 -112px; 

.ui-icon-flag  background-position: -16px -112px; 

.ui-icon-calendar  background-position: -32px -112px; 

.ui-icon-cart  background-position: -48px -112px; 

.ui-icon-pencil  background-position: -64px -112px; 

.ui-icon-clock  background-position: -80px -112px; 

.ui-icon-disk  background-position: -96px -112px; 

.ui-icon-calculator  background-position: -112px -112px; 

.ui-icon-zoomin  background-position: -128px -112px; 

.ui-icon-zoomout  background-position: -144px -112px; 

.ui-icon-search  background-position: -160px -112px; 

.ui-icon-wrench  background-position: -176px -112px; 

.ui-icon-gear  background-position: -192px -112px; 

.ui-icon-heart  background-position: -208px -112px; 

.ui-icon-star  background-position: -224px -112px; 

.ui-icon-link  background-position: -240px -112px; 

.ui-icon-cancel  background-position: 0 -128px; 

.ui-icon-plus  background-position: -16px -128px; 

.ui-icon-plusthick  background-position: -32px -128px; 

.ui-icon-minus  background-position: -48px -128px; 

.ui-icon-minusthick  background-position: -64px -128px; 

.ui-icon-close  background-position: -80px -128px; 

.ui-icon-closethick  background-position: -96px -128px; 

.ui-icon-key  background-position: -112px -128px; 

.ui-icon-lightbulb  background-position: -128px -128px; 

.ui-icon-scissors  background-position: -144px -128px; 

.ui-icon-clipboard  background-position: -160px -128px; 

.ui-icon-copy  background-position: -176px -128px; 

.ui-icon-contact  background-position: -192px -128px; 

.ui-icon-image  background-position: -208px -128px; 

.ui-icon-video  background-position: -224px -128px; 

.ui-icon-script  background-position: -240px -128px; 

.ui-icon-alert  background-position: 0 -144px; 

.ui-icon-info  background-position: -16px -144px; 

.ui-icon-notice  background-position: -32px -144px; 

.ui-icon-help  background-position: -48px -144px; 

.ui-icon-check  background-position: -64px -144px; 

.ui-icon-bullet  background-position: -80px -144px; 

.ui-icon-radio-on  background-position: -96px -144px; 

.ui-icon-radio-off  background-position: -112px -144px; 

.ui-icon-pin-w  background-position: -128px -144px; 

.ui-icon-pin-s  background-position: -144px -144px; 

.ui-icon-play  background-position: 0 -160px; 

.ui-icon-pause  background-position: -16px -160px; 

.ui-icon-seek-next  background-position: -32px -160px; 

.ui-icon-seek-prev  background-position: -48px -160px; 

.ui-icon-seek-end  background-position: -64px -160px; 

.ui-icon-seek-start  background-position: -80px -160px; 
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */

.ui-icon-seek-first  background-position: -80px -160px; 

.ui-icon-stop  background-position: -96px -160px; 

.ui-icon-eject  background-position: -112px -160px; 

.ui-icon-volume-off  background-position: -128px -160px; 

.ui-icon-volume-on  background-position: -144px -160px; 

.ui-icon-power  background-position: 0 -176px; 

.ui-icon-signal-diag  background-position: -16px -176px; 

.ui-icon-signal  background-position: -32px -176px; 

.ui-icon-battery-0  background-position: -48px -176px; 

.ui-icon-battery-1  background-position: -64px -176px; 

.ui-icon-battery-2  background-position: -80px -176px; 

.ui-icon-battery-3  background-position: -96px -176px; 

.ui-icon-circle-plus  background-position: 0 -192px; 

.ui-icon-circle-minus  background-position: -16px -192px; 

.ui-icon-circle-close  background-position: -32px -192px; 

.ui-icon-circle-triangle-e  background-position: -48px -192px; 

.ui-icon-circle-triangle-s  background-position: -64px -192px; 

.ui-icon-circle-triangle-w  background-position: -80px -192px; 

.ui-icon-circle-triangle-n  background-position: -96px -192px; 

.ui-icon-circle-arrow-e  background-position: -112px -192px; 

.ui-icon-circle-arrow-s  background-position: -128px -192px; 

.ui-icon-circle-arrow-w  background-position: -144px -192px; 

.ui-icon-circle-arrow-n  background-position: -160px -192px; 

.ui-icon-circle-zoomin  background-position: -176px -192px; 

.ui-icon-circle-zoomout  background-position: -192px -192px; 

.ui-icon-circle-check  background-position: -208px -192px; 

.ui-icon-circlesmall-plus  background-position: 0 -208px; 

.ui-icon-circlesmall-minus  background-position: -16px -208px; 

.ui-icon-circlesmall-close  background-position: -32px -208px; 

.ui-icon-squaresmall-plus  background-position: -48px -208px; 

.ui-icon-squaresmall-minus  background-position: -64px -208px; 

.ui-icon-squaresmall-close  background-position: -80px -208px; 

.ui-icon-grip-dotted-vertical  background-position: 0 -224px; 

.ui-icon-grip-dotted-horizontal  background-position: -16px -224px; 

.ui-icon-grip-solid-vertical  background-position: -32px -224px; 

.ui-icon-grip-solid-horizontal  background-position: -48px -224px; 

.ui-icon-gripsmall-diagonal-se  background-position: -64px -224px; 

.ui-icon-grip-diagonal-se  background-position: -80px -224px; 


/* Misc visuals
----------------------------------*/

/* Corner radius */

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl 
    -khtml-border-top-left-radius: 4px/*cornerRadius*/;
    -moz-border-radius-topleft: 4px/*cornerRadius*/;
    -webkit-border-top-left-radius: 4px/*cornerRadius*/;
    border-top-left-radius: 4px/*cornerRadius*/;


.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr 
    -khtml-border-top-right-radius: 4px/*cornerRadius*/;
    -moz-border-radius-topright: 4px/*cornerRadius*/;
    -webkit-border-top-right-radius: 4px/*cornerRadius*/;
    border-top-right-radius: 4px/*cornerRadius*/;


.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl 
    -khtml-border-bottom-left-radius: 4px/*cornerRadius*/;
    -moz-border-radius-bottomleft: 4px/*cornerRadius*/;
    -webkit-border-bottom-left-radius: 4px/*cornerRadius*/;
    border-bottom-left-radius: 4px/*cornerRadius*/;


.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br 
    -khtml-border-bottom-right-radius: 4px/*cornerRadius*/;
    -moz-border-radius-bottomright: 4px/*cornerRadius*/;
    -webkit-border-bottom-right-radius: 4px/*cornerRadius*/;
    border-bottom-right-radius: 4px/*cornerRadius*/;


/* Overlays */

.ui-widget-overlay 
    background: #aaaaaa /*bgColorOverlay*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png) /*bgImgUrlOverlay*/ 50% /*bgOverlayXPos*/ 50% /*bgOverlayYPos*/ repeat-x/*bgOverlayRepeat*/;
    filter: Alpha(Opacity=30)/*opacityOverlay*/;
    opacity: .3;


.ui-widget-shadow 
    -khtml-border-radius: 8px/*cornerRadiusShadow*/;
    -moz-border-radius: 8px/*cornerRadiusShadow*/;
    -webkit-border-radius: 8px/*cornerRadiusShadow*/;
    background: #aaaaaa /*bgColorShadow*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png) /*bgImgUrlShadow*/ 50% /*bgShadowXPos*/ 50% /*bgShadowYPos*/ repeat-x/*bgShadowRepeat*/;
    border-radius: 8px/*cornerRadiusShadow*/;
    filter: Alpha(Opacity=30)/*opacityShadow*/;
    margin: -8px /*offsetTopShadow*/ 0 0 -8px/*offsetLeftShadow*/;
    opacity: .3;
    padding: 8px/*thicknessShadow*/;

【讨论】:

以上是关于jQuery UI:DatePicker 只有 CSS?的主要内容,如果未能解决你的问题,请参考以下文章

jquery ui datepicker怎么设置默认日期

jQuery UI 中的 datepicker( )方法

使用 jquery-ui/datepicker 的内存泄漏

jquery UI datepicker汉化

使用 jquery 验证和 jquery-ui datepicker

将 JQuery UI Datepicker 与来自 Jquery UI 主题的图标一起使用