CODEWITHSUNDEEP
kendo-uidatepicker
3nath
3nath

Reputation: 223

How to disable past dates without hiding them in Kendo date picker?

If I set min value for the date picker, it does not display dates less than min date when it's opened.

My requirement is that dates less than min date should be shown in the date picker, but they should be disabled.

Upvotes: 5

Views: 10122

Answers (2)

CuriousSuperhero
CuriousSuperhero

Reputation: 6671

You can make it with CSS styles and using custom content in Kendo datepicker.

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;
}

JavaScript:

$(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");

});

See demo: JSFIDDLE

Upvotes: 2

CSharper
CSharper

Reputation: 5580

All credit to devlero on this one, I was able to convert this to Razor Syntax, if anyone would like to use that instead. 

@(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")
        }

Upvotes: 3

Related Questions