2017-01-09 25 views
1

この質問は関連した:How to disable past dates without hiding them in Kendo date picker?。これは私のHTMLマークアップです:剣道の未来の日付を無効にする角度日付ピッカー

<input kendo-date-picker id="datepicker" ng-model="dateString" k-options="dateOptions" k-ng-model="dateObject" 
       style="width: 100%;" /> 

そして、私のコントローラで私はこれをしました。しかし

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

、私はクリックしても、どんな未来を選択することができます。

var disabledDaysAfter = [ 
     +new Date() 
]; 
$scope.dateOptions = { 
    dates: disabledDaysAfter, 
    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") 
    } 
}; 

とCSSで

hrefを削除した後どうすれば修正できますか?レンダリングされたマークアップは、次のようになります。

<td class="k-state-focused" id="02dd61ed-b4f2-494f-8238-e76da5b51346_cell_selected" role="gridcell" aria-selected="true" aria-label="Current focused date is Thursday, January 12, 2017"> 
    <a tabindex="-1" title="Thursday, January 12, 2017" data-value="2017/0/12"> 
     <div class="disabledDay">12</div> 
    </a> 
</td> 
+0

なぜ新しい日付()の前にプラスを置いたのですか? 将来の日付をクリックしたときに正確に何をしたいですか? – Shai

+0

私は将来の日付をクリックすると何も起こらないはずです。 – Ravimallya

答えて

3

実際は私が思ったよりもはるかに単純です。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/> 

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
</head> 
<body> 

<input id="datetimepicker" /> 
<script> 
$("#datetimepicker").kendoDatePicker({ 
    value: new Date(), 
    disableDates: function (date) { 
     return date > new Date(); 
    } 
}); 
</script> 
</body> 
</html> 
+0

ありがとうございます。しかし、私は本当に将来の日程を選ぶことができます。そこでは起こるべきではありません。ユーザーはクリックできないようにしてください。今、ユーザは将来の日付を選択することができますが、カレンダーは終了していません。 http://jsbin.com/jexisesuko/edit?html,css,js,console,outputを参照してください。 datepickerはjquery ui datepicker ex:http://jsfiddle.net/X82aC/544/のように動作する必要があります。 – Ravimallya

+0

このソリューションはお客様のニーズに適していますか? – Shai

+0

いいえ、私は新しいDate()と選択された日付をチェックしてユーザに警告するのに使っていました。 – Ravimallya

関連する問題