5

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.

CuriousSuperhero
  • 6,531
  • 4
  • 27
  • 50
3nath
  • 223
  • 4
  • 12

2 Answers2

3

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")
        }
CSharper
  • 5,420
  • 6
  • 28
  • 54
  • you can also minify the onOpen function code by `$("a.k-link:has('.disabledDay')").removeClass("k-link").removeAttr("href");` – Hiren Kagrana Nov 26 '14 at 06:42
2

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

CuriousSuperhero
  • 6,531
  • 4
  • 27
  • 50
  • +1 for nice answer.But user is still able to select those disabled dates through manual/keyboard input :) – ManirajSS Oct 21 '14 at 19:29
  • you can also minify the open event code by `$("a.k-link:has('.disabledDay')").removeClass("k-link").removeAttr("href");` – Hiren Kagrana Nov 26 '14 at 06:41