Make day unselectable or unclickable in Kendo Datepicker

Question

Is there a way to make days from an array unselectable in Kendo Datepicker?

Within the template I´ve them as non-visible but I want them to visible and unselectable instead.

Razor:

<div>
@(Html.Kendo().DatePicker()
      .Name("datepicker")
      .Value(DateTime.Today)
      .MonthTemplate("# if ($.inArray(+data.date, birthdays) != -1) { #" +
                         "<div style=\"display:none;\">#= data.value #</div>" +
                     "# } else {#" +
                     "#= data.value #" +
                     "# } #")
)
</div>

Script:

<script>
var today = new Date(),
    birthdays = [
        +new Date(today.getFullYear(), today.getMonth(), 11),
        +new Date(today.getFullYear(), today.getMonth() + 1, 6),
        +new Date(today.getFullYear(), today.getMonth() + 1, 27),
        +new Date(today.getFullYear(), today.getMonth() - 1, 3),
        +new Date(today.getFullYear(), today.getMonth() - 2, 22)
    ];
</script>

gardarvalur · Accepted Answer · 2014-10-23T18:16:03.910

I actually stumbled upon an answer that got me on the right track so I´m going to answer my own question in case anyone was facing the same issue.

Edited: as stated in the comments from @CSharper his answer from another thread is quite similar. Therefore I´m going to link to his answer aswell.

I created a style class to make the date appear as disabled.

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

I registered an onOpen event on the picker and added a class on the element

<div>
    @(Html.Kendo().DatePicker()
          .Name("datepicker")
          .Value(DateTime.Today)
          .Events(e => e.Open("onDateOpen"))
          .MonthTemplate("# if ($.inArray(+data.date, birthdays) != -1) { #" +
                     "<div class=\"disabledDay\">#= data.value #</div>" +
                 "# } else {#" +
                 "#= data.value #" +
                 "# } #")
    )
</div>

I then created a function that disabled the link itself via open-event

<script>
    var today = new Date(),
        birthdays = [
            +new Date(today.getFullYear(), today.getMonth(), 11),
            +new Date(today.getFullYear(), today.getMonth() + 1, 6),
            +new Date(today.getFullYear(), today.getMonth() + 1, 27),
            +new Date(today.getFullYear(), today.getMonth() - 1, 3),
            +new Date(today.getFullYear(), today.getMonth() - 2, 22)
        ];

    function onDateOpen(e) {
        //removing this class makes the day unselectable
        $(".disabledDay").parent().removeClass("k-link"); 
        //this removes the hyperlink styling
        $(".disabledDay").parent().removeAttr("href"); 
    };
</script>

Voila! :)

Is that from the question I had an answer in? http://stackoverflow.com/questions/26484563/how-to-disable-past-dates-without-hiding-them-in-kendo-date-picker/26489945#26489945 . If it is can you please add a link to it in your post — CSharper, Oct 23 '14 at 17:25
Actually I linked the page where I got my answer from, but it seems as your answer is quite similar. I can link to your answer too :) — gardarvalur, Oct 23 '14 at 17:53

Make day unselectable or unclickable in Kendo Datepicker

1 Answers1