jQuery UI Datepicker : 오늘도 선택하지 않으면 강조 표시하지 않습니다.

나는 jQuery datepicker을 사용하여 날짜를 선택합니다. 변경할 기본 동작이 1 개 있다는 점만 제외하면 잘 작동합니다. 하루를 선택하면 선택한 날이 강조 표시됩니다. 현재 날짜도 강조 표시되어 있지만 다른 CSS 스타일 (나도 좋아)을 사용합니다. 그러나 현재 날짜를 선택하면 현재 날짜가 강조 표시로 바뀌어 강조 표시됩니다 ... 현재 날짜 강조 표시를 대체하도록 선택하는 것이 좋습니다. 선택하면 매우 명확하게 나타납니다. 당일jQuery UI Datepicker : 오늘도 선택하지 않으면 강조 표시하지 않습니다.

이제는 내 문제를 해결하기 위해 CSS를 업데이트 할 수 있다고 생각합니다. 그러나 나중에 앱에 스킨을 추가하고 싶기 때문에 out-of-the-box jQuery UI CSS를 조정하고 싶지는 않습니다. 즉, jQuery UI 테마를 여러 개 가져 오는 경우 ... 모두 똑같은 조작을해야합니다 (매우 바람직하지 않음).

실제 Datepicker 플러그인을 업데이트 할 수도 있지만 나중에 내 Datepicker를 업데이트하려는 경우 문제가 발생합니다.이 수정 사항을 다시 작성해야합니다.

이상적으로, 필자는 Datepicker에 내장 된 옵션을 사용하여 목표를 달성 할 수 있지만 아직 옵션 중 어느 것도 적합하지 않은 것으로 보입니다. 나는 JavaScript 해킹의 일종을 정착 시키거나, CSS가 페이지에 닿았지만, 지금은 아이디어를 잃어 버렸다.

출처

2009-04-08 Mike Stone

페이지에 CSS 파일을 추가하는 것이 좋습니다. 사용하기 쉽도록 CSS를 쉽게 관리하고 사용할 수 있습니다!

이전에로드 한 기본 jQuery CSS 또는 테마 CSS 파일 다음에 override 태그를 추가하여 head 태그에 추가해야 CSS의 값을 덮어 쓸 수 있습니다. (당신은 또한 당신의 특정 인스턴스의 클래스 또는 ID를 참조, 기본 태그의 특이성을 증가시킬 수있다.)

즉

<head> 
    <link href="base_jquery_css_file" rel="stylesheet"/> 
    <link href="theme_jquery_css_file" rel="stylesheet"/> 

    <link href="your_override_css" rel="stylesheet"/> 
</head>

은 "your_override_css"파일은 단순히 포함됩니다 :

.ui-state-active, .ui-widget-content .ui-state-active { 
    /*any CSS styles you want overriden i.e.*/ 
    border: 1px solid #999999; 
    background-color: #EEEEEE; 
}

마이크에서

참고 :

나는 일을 나타내는 앵커 주변에 td가 있다는 것을 알아 냈고, td는 "오늘"의 정보를 가지고있다. 그래서 여러 브라우저를 가진 항목을 선택하는 크로스 브라우저 방식은 아니지만 (내가 찾은 것을), 다음 그냥 PHPexperts.ca로 새 파일,이 경우에 작동하는 것은 설명 :

.ui-datepicker-today .ui-state-active { 
    border: 1px solid #aaaaaa; 
}

출처

2009-04-08 18:24:16

이것은 완벽하게 작동하는 것 같습니다. 정확하게 원했던 것입니다. 감사! –

정말요? 오늘은 강조 표시되지 않고 현재 선택 사항이 강조 표시된 것에 대한 대답은 아닙니다. 다른 클래스가 있기 때문에 중요한 것은 배경도 바뀌지 않는 것 같습니다. 또한, 나는 선택되지 않은 스타일이 무엇인지 모른다. –

이 나에게 정확히 복제하는 방법을 알아낼 수있는 걸 렸어요 때문에 "선택 "스타일을 PHPexperts.ca의 답변과 함께 사용하는 경우에도 오늘날의 스타일을 능가하는 스타일을 제공합니다. 문제가있을 경우 좀 더 간단하게 사용할 수있는 정보가 있습니다. 당신이 "오늘"이 아닌 다른 일을 선택하면

은 "오늘"을 선택했을 때 동일한 모양을 위해 복사 한 스타일은 a 태그에 셀렉터

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active

이을에 Firebug가 설치된 Firefox (날짜 선택, 날짜 피커 다시 열기, 마우스 오른쪽 버튼 클릭, '요소 검사')가 있으면 쉽게 찾을 수 있습니다.당신이 테마를 변경하면 jQuery를 UI 테마 'UI의 어둠'당신의 재정의 CSS에 복사 할 스타일

는 이러한 스타일의 3 변경과 같은,

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background:url("images/ui-bg_inset-soft_30_f58400_1x100.png") repeat-x scroll 50% 50% #F58400; border:1px solid #FFAF0F; color:#FFFFFF; }

입니다.

출처

2010-08-17 20:28:06

사실 매우 쉽습니다. 을 배경 및 경계 요소에 대한 .ui-state-active 클래스에 추가하기 만하면됩니다.

출처

2011-12-19 18:09:01 Vince

.ui-state-highlight { 
    border: 1px solid #d3d3d3 !important; 
    background-color: #e6e6e6 !important; 
}

출처

2017-09-18 23:02:53 raminjacobson

jQuery UI Datepicker : 오늘도 선택하지 않으면 강조 표시하지 않습니다.

답변

관련 문제