This is a migrated thread and some comments may be shown as answers.

How to disable weekends and holidays

7 Answers 2181 Views

Date/Time Pickers

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 31 Jul 2015, 03:17 PM

Hello Kriztine,

Weekend days on the DatePicker have the .k-weekend class associated to them so a ways to disable them would be:

.kendoDatePicker({

open: function() { $('.k-weekend a').bind('click', function() { return false; }); }

});

Now, the holidays are not different to other dates because they vary depending on the country, but particular dates can be disabled with a little coding. Here's an example of a DatePicker with the last three days disabled:

<!DOCTYPE html>

<html>

<head>

<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>

<meta charset=utf-8 />

<title>JS Bin</title>

</head>

<body>

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

<script>

$(document).ready(function() {

disabledDays = [

+new Date("7/29/2015"),

+new Date("7/30/2015"),

+new Date("7/31/2015"),

];

var p = $("#datepicker").kendoDatePicker({

value: new Date(), //setting the value to "today"

dates: disabledDays, //passing the disabledDays array to the template

month: {

// template for dates in month view

content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +

'<div class="disabledDay">#= data.value #</div>' +

'# } else { #' +

'#= data.value #' +

'# } #'

},

open: function(e){

$(".disabledDay").parent().removeClass("k-link") //removing this class makes the day unselectable

$(".disabledDay").parent().removeAttr("href") //this removes the hyperlink styling

},

}).data("kendoDatePicker");

});

</script>

<style>

.disabledDay{

/* adding some CSS to match the normal days styling */

display: block;

overflow: hidden;

min-height: 22px;

line-height: 22px;

padding: 0 .45em 0 .1em;

cursor:default;

opacity: 0.5;

}

</style>

</body>

</html>

I hope this helps.

answered on 22 Mar 2019, 02:40 PM

Hello Dan,

This can be accomplished using the approach from the second picker demonstrated here:
https://demos.telerik.com/aspnet-mvc/datepicker/disable-dates

And adding logic to include the weekend:

@(Html.Kendo().DatePicker()

.Name("weekend-date-picker")

.DisableDates("disableDates")

)

JS:

function disableDates(date) {

var dates = [

new Date("1/1/2019"),

new Date("1/21/2019"),

new Date("2/18/2019"),

new Date("5/27/2019"),

new Date("7/4/2019"),

new Date("9/2/2019"),

new Date("10/14/2019"),

new Date("11/11/2019"),

new Date("11/28/2019"),

new Date("12/25/2019")

];

if (date) {

var day = date.getDay();

var isWeekend = (day === 6) || (day === 0);

if (isWeekend || compareDates(date, dates)) {

return true;

} else {

return false;

}

function compareDates(date, dates) {

for (var i = 0; i < dates.length; i++) {

if (dates[i].getDate() == date.getDate() &&

dates[i].getMonth() == date.getMonth() &&

dates[i].getYear() == date.getYear()) {

return true

}

That should do the trick.

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.