검도 데이트 피커에서 과거 날짜를 숨기지 않고 비활성화하는 방법은 무엇입니까?

Question

날짜 선택 도구의 최소값을 설정하면 열 때 최소 날짜보다 적은 날짜가 표시되지 않습니다.

내 요구 사항은 날짜 선택기에 최소 날짜보다 적은 날짜를 표시해야하지만 사용하지 않아야한다는 것입니다.

Answer 1

검도 데이트 피커에서 CSS 스타일과 맞춤 콘텐츠를 사용하여 만들 수 있습니다.

HTML :

이

<input id="datepicker" style="width:150px;" /> 

CSS :

.disabledDay { 
    display: block; 
    overflow: hidden; 
    min-height: 22px; 
    line-height: 22px; 
    padding: 0 .45em 0 .1em; 
    cursor:default; 
    opacity: 0.5; 
} 

자바 스크립트 :

$(document).ready(function() { 

disabledDaysBefore = [ 
    +new Date("10/20/2014") 
]; 

var p = $("#datepicker").kendoDatePicker({ 
     value: new Date(), 
     dates: disabledDaysBefore, 
     month: { 
      content: '# if (data.date < data.dates) { #' +  
      '<div class="disabledDay">#= data.value #</div>' + 
      '# } else { #' + 
      '#= data.value #' + 
      '# } #' 
     }, 
     open: function(e){ 
      $(".disabledDay").parent().removeClass("k-link") 
      $(".disabledDay").parent().removeAttr("href") 
     }, 
    }).data("kendoDatePicker"); 

}); 

참조 데모 : JSFIDDLE

Answer 2

모든 신용 생에 devlero하기 아무도 그것을 사용하고 싶지 않다면, 이것을 Razor Syntax로 변환 할 수있었습니다. '(이 : 좋은 answer.But 사용자를위한

@(Html.Kendo().DatePicker() 
      .Name("datepicker") 
      .Value(DateTime.Today) 
      .Events(e => e.Open("onOpen")) 
      .MonthTemplate("# if (data.date < disabledDaysBefore) { #" + 
           "<div class='disabledDay'>#= data.value #</div>" + 
          "# } else { #" + 
       "#= data.value #" + 
       "# } #") 
      .HtmlAttributes(new { style = "width: 150px;" })  
    ) 


$(document).ready(function() {       
     disabledDaysBefore = [ 
      +new Date("10/20/2014") 
     ];  
    }); 

function onOpen() { 
      $(".disabledDay").parent().removeClass("k-link") 
      $(".disabledDay").parent().removeAttr("href") 
     }