datepicker에서 강조 표시된 "오늘"날짜를 변경하는 방법

Question

datepicker를 사용하여 두 날짜 필드 (날짜와 현재 날짜)에서 날짜를 선택합니다.

그 중에서 강조 표시된 기본 날짜는 오늘 날짜입니다. 두 번째 datepicker에서 기본 강조 날짜를 다른 날로 변경해야합니다. (예를 들어 오늘 + 8 일).

어떻게하면 제대로 할 수 있습니까?

다음은,

$(function() { 
$("#datepicker").datepicker(); 
$("#datepicker").datepicker("option", "dateFormat", "yy-mm-dd"); // ISO 8601 
$("#datepicker2").datepicker(); 
$("#datepicker2").datepicker("option", "dateFormat", "yy-mm-dd"); 
}); 

덕분에 내 datepickers 있습니다.

---------------------------------- 업데이트 --------------------------- - ------------------------------------

마이클을위한 스크린 샷 다음에,

나는 검은 선으로 접경 다음,

$("#datepicker2").datepicker("option", "defaultDate", +2); 

당신은 이십일일 여전히 볼 수 있습니다

(오늘) 강조되고 23을 넣어. 안녕 조명으로 21처럼 23 모양이 필요합니다. http://api.jqueryui.com/datepicker/#option-defaultDate

편집 : 필요가 21

Answer 1

$("#datepicker").datepicker("option", "defaultDate", +8); 

소스를 강조 없습니다 현재 날짜는 항상 날짜 선택기의 한 부분으로 강조 표시됩니다. 이 기능을 해제 할 수있는 옵션이 없습니다. "오늘"이 무엇인지 사용자에게 분명히 밝히는 것입니다.

.ui-datepicker-today a.ui-state-highlight { 
     border-color: #d3d3d3; 
     background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;; 
     color: #555555;  
    } 
    .ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight { 
     border-color: #aaaaaa; 
     background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; 
     color: #212121; 
    } 

근무 jsfiddle : 당신은 그러나 일부 CSS 승 /이의 그래픽 모양을 무시할 수 http://jsfiddle.net/EpWud/

이 기본 테마를 사용하는 가정을 -하지만 당신은 어떤 주제에 대한이 같은 연습을 할 수 있습니다. 위의 코드와 같은 스타일을 무시하십시오. 그러나이 CSS는 불완전합니다. : 호버 (hover) 상태와 같은 다른 경우에 우선 적용해야합니다.

Answer 2

내가 조건부 대신 new Date()의 "오늘"날짜를 새로운 설정을 사용하려면이 날짜 선택기 메소드를 오버라이드 (override) 한 jQuery UI DatePicker change highlighted "today" date

// Get users 'today' date 
var localToday = new Date(); 
localToday.setDate(tomorrow.getDate()+1); // tomorrow 

// Pass the today date to datepicker 
$("#datepicker").datepicker({ 
    showButtonPanel: true, 
    localToday: localToday // This option determines the highlighted today date 
}); 

에서 선택한 답변에 작은 팅겨. 새로운 설정은 localToday입니다. 이 같은

재정 $.datepicker._gotoToday 및 $.datepicker._generateHTML : http://jsfiddle.net/NAzz7/5/

Answer 3

나는 UI 코어가 defaultDate와 표시 방법에 행복하지 않았다 : 여기

$.datepicker._gotoToday = function(id) { 
    /* ... */ 
    var date = inst.settings.localToday || new Date() 
    /* ... */ 
} 

$.datepicker._generateHTML = function(inst) { 
    /* ... */ 
    tempDate = inst.settings.localToday || new Date() 
    /* ... */ 
} 

는 전체 코드 및 사용이 보여주는 demo입니다 그 어설픈 국경과 모두. 많은 시행 착오 끝에 두 번째 datepicker에 포커스 메서드를 추가하고 setDate 메서드를 사용했습니다.

$('#datepicker2').datepicker().focus(function(){ 
    $(this).datepicker('setDate',+2); 
}); 

이

당신에게 테마를 기반으로 배경 색상으로 선택한 날짜를 줄 것이다 오늘날도 날짜 선택기가 열릴 때 배경입니다 유지합니다. 여기서 유일한 단점은 datepicker에서 날짜를 선택하는 것을 원하지 않는다면 다시 들어가서 입력 필드를 지워야한다는 것입니다.

나는 일반적으로 초점 방법을 사용하는 것을 좋아하지 않지만 약간의 해시처럼 보입니다. 그러나 나는 그것에 매달리고 있습니다.

Answer 4

이 JQuery와 - ui.js

today = this._daylightSavingAdjust(
       new Date("Your Date Here")), // clear time 

Answer 5

사용 onSelect를 옵션에 _generateHTML에서 변수를 변경함으로써 가능하다. 그것은해야 다음과 같습니다

$('#datepickerID').datepicker({ 
 
        onSelect: function(dateText, inst) { 
 
         $('#ui-datepicker-div').addClass("calendar-piced"); 
 
        }, 
 
        showButtonPanel: true, 
 
        gotoCurrent: true 
 
       });

#datepickerID{ 
 
    &.calendar-piced{ 
 
     .ui-datepicker-today{ 
 
      a{ 
 
       background: #f6f6f6; 
 
       border: 1px solid #c5c5c5; 
 
       color: #454545; 
 
      } 
 
     } 
 
    } 
 
}

이