jQuery datePicker, 현재 입력 값 날짜를 강조하는 방법은 무엇입니까?

Question

나는 jQuery에 대한 datePicker 컨트롤을 사용하고 있으며 현재 선택된 입력 값 (또는 해당 문제의 현재 날짜)을 강조 할 수 없다는 점을 제외하고는 모두가 좋습니다. 내 텍스트 입력에 유효한 날짜 값이 있고 DatePicker가 올바른 달 / 연도를 반환하도록 할 수 있지만 캘린더에서 해당 날짜를 강조 할 수는 없습니다.

내 코드는 다음과 같습니다.

$('.date_picker').datepicker({ dateFormat: 'dd/mm/yy', duration: '', gotoCurrent: true, defaultDate: -1});

.. 그리고 여기에 스타일 시트가 있습니다.

/*datepicker*/
/* Main Style Sheet for jQuery UI date picker */
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
    font-family: Verdana, Arial, sans-serif;
    background: #ffffff url(images/ffffff_40x100_textures_01_flat_0.png) 0 0 repeat-x;
    font-size: 0.80em;
    border: 4px solid #dddddd;
    width: 15.5em;
    padding: 2.5em .5em .5em .5em;
    position: relative;
}
.ui-datepicker-div, #ui-datepicker-div {
    z-index: 9999; /*must have*/
    display: none;
}
.ui-datepicker-inline {
    float: left;
    display: block;
}
.ui-datepicker-control {
    display: none;
}
.ui-datepicker-current {
    display: none;
}
.ui-datepicker-next, .ui-datepicker-prev {
    position: absolute;
    left: .5em;
    top: .5em;
    background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
.ui-datepicker-next {
    left: 14.6em;
}
.ui-datepicker-next:hover, .ui-datepicker-prev:hover {
    background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
.ui-datepicker-next a, .ui-datepicker-prev a {
    text-indent: -999999px;
    width: 1.3em;
    height: 1.4em;
    display: block;
    font-size: 1em;
    background: url(images/888888_7x7_arrow_left.gif) 50% 50% no-repeat;
    border: 1px solid #d3d3d3;
    cursor: pointer;
}
.ui-datepicker-next a {
    background: url(images/888888_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-prev a:hover {
    background: url(images/454545_7x7_arrow_left.gif) 50% 50% no-repeat;
}
.ui-datepicker-next a:hover {
    background: url(images/454545_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-prev a:active {
    background: url(images/222222_7x7_arrow_left.gif) 50% 50% no-repeat;
}
.ui-datepicker-next a:active {
    background: url(images/222222_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-header select {
    border: 1px solid #d3d3d3;
    color: #555555;
    background: #e6e6e6;
    font-size: 1em;
    line-height: 1.4em;
    position: absolute;
    top: .5em;
    margin: 0 !important;
}
.ui-datepicker-header option:focus, .ui-datepicker-header option:hover {
    background: #dadada;
}
.ui-datepicker-header select.ui-datepicker-new-month {
    width: 7em;
    left: 2.2em;
}
.ui-datepicker-header select.ui-datepicker-new-year {
    width: 5em;
    left: 9.4em;
}
table.ui-datepicker {
    width: 15.5em;
    text-align: right;
}
table.ui-datepicker td a {
    padding: .1em .3em .1em 0;
    display: block;
    color: #555555;
    background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
    cursor: pointer;
    border: 1px solid #ffffff;
}
table.ui-datepicker td a:hover {
    border: 1px solid #999999;
    color: #212121;
    background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
table.ui-datepicker td a:active {
    border: 1px solid #dddddd;
    color: #222222;
    background: #ffffff url(images/ffffff_40x100_textures_02_glass_65.png) 0 50% repeat-x;
}
table.ui-datepicker .ui-datepicker-title-row td {
    padding: .3em 0;
    text-align: center;
    font-size: .9em;
    color: #222222;
    text-transform: uppercase;
}
table.ui-datepicker .ui-datepicker-title-row td a {
    color: #222222;
}
.ui-datepicker-cover {
    display: none;
    display/**/: block;
    position: absolute;
    z-index: -1;
    filter: mask();
    top: -4px;
    left: -4px;
    width: 193px;
    height: 200px;
}

IE7을 사용하여 테스트하고 있지만 Firefox에서 동일한 동작을 볼 수 있습니다.

문제에 대한 아이디어가 있습니까?

Answer 1

우선, DatePicker를보고있는 브라우저는 무엇입니까? DatePicker 내의 날짜/섹션의 일부 채색이 다르게 보입니다. IE6 이후 브라우저와 비교 (Firefox 3, Chrome, IE7).

예를 들어, IE6은 주말의 배경색을 무시하는 것으로 보입니다.

현재 선택된 날짜와 오늘 날짜의 배경색은 모두 CSS를 통해 제어됩니다. 기본 CSS 마지막 날짜 피커 입니다 메인 플로라 스타일 시트, 나는 a가 있음을 알지만 DatePicker의 새 버전/스타일 시트 (나는 아직 읽지 않았다. 나는 그것이 새로운 버전일지도 모른다) jQuery 이번 주 사이트.

스타일 시트 내의 클래스의 관련 기본 이름은 Are의 배경색을 변경해야합니다.

 /* current input value background color */
.ui-datepicker-current-day
{
    background: #83C948
}
/* today's background color */
.ui-datepicker-today 
{
    background: #83C948
}

편집하다:

당신이 사용하는 경우 오래된 날짜를 그대로, 이들은 플러그인 JS 파일의 관련 라인입니다.

this._currentClass = 'ui-datepicker-current-day'; 
// The name of the current day marker class


(printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + ...
// highlight today (if different)

그러므로 당신도 마찬가지입니다

• 오늘 강조 표시하려면 CSS 스타일 시트에 이러한 CSS 클래스가 필요합니다.

또는

• 플러그인 JS 파일의 이름을 변경하고 CSS 스타일 시트의 클래스에 동일한 이름을 사용해야합니다.

개인적으로, 나는 그들이 일반적으로 알려진 클래스 이름이기 때문에 전자를 선택합니다.

편집 2 :

그게 보인다 새로운 datepicker 약간 다른 CSS를 사용하여 현재 선택된 날짜와 오늘 날짜를 색상합니다. 이전 버전은 테이블 셀을 스타일링했습니다 (TD) 요소, 새 버전은 앵커를 스타일링합니다 (ㅏ) 셀 내부의 요소.

사용 개똥 벌레 Firefox 3 (적극 권장)에서 오늘날 CSS는

.ui-state-highlight, .ui-widget-content .ui-state-highlight 
{
    background:#FFE45C url(../images/?new=ffe45c&w=1&h=100&f=png&q=100&fltr[]=over|textures/03_highlight_soft.png|0|0|75) repeat-x scroll 50% top;
    border:1px solid #FED22F;
    color:#363636;
}

그리고 입력의 현재 선택된 날짜에 대해

.ui-state-active, .ui-widget-content .ui-state-active 
{
    background:#FFFFFF url(../images/?new=ffffff&w=1&h=400&f=png&q=100&fltr[]=over|textures/02_glass.png|0|0|65) repeat-x scroll 50% 50%;
    border:1px solid #FBD850;
    color:#EB8F00;
    font-weight:bold;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
}

둘 다에서 나왔습니다 jQuery UI CSS 프레임 워크

Answer 2

이것은 최상의 솔루션입니다.

입력 필드, 주간을 선택하십시오.

https://github.com/prezent/jquery-weekpicker