Telerik Forums / UI for ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.

How to disable weekends and holidays

7 Answers 1956 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Kriztine
Top achievements
Rank 1
Kriztine asked on 31 Jul 2015, 02:10 AM
I want to disable all Saturdays, Sundays and holidays. Please help me how to do that.

7 Answers, 1 is accepted

Sort by
0
eo
Top achievements
Rank 1
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.mobile.all.min.css" rel="stylesheet" type="text/css" />
<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.

0
Eyup
Telerik team
answered on 03 Aug 2015, 08:06 AM
Hi Guys,

@Eo
Thank you for sharing this approach with our community.

@Kriztine
You can also check these resources:
http://demos.telerik.com/aspnet-mvc/datepicker/template
http://jsbin.com/eyUdeni/2/edit?html,js,output

Hope this helps.

Regards,
Eyup
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 20 Mar 2019, 12:11 PM

Hello,

I have to implement the same thing. Has this been improved in the new telerik version (2019.1.220)? The possible way I can think of with the current version of telerik would be to use a function on disabledDates, but that would mean that I would have to calculate myself the week-end days and I would want for the telerik to do this.

0
Eyup
Telerik team
answered on 21 Mar 2019, 02:23 PM
Hello Dan,

Yes, you can achieve this requirement using the following property:
.DisableDates(DayOfWeek.Saturday, DayOfWeek.Sunday)

You can find a live sample here for demonstration:
https://demos.telerik.com/aspnet-mvc/datepicker/disable-dates

I hope this will prove helpful.

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.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 21 Mar 2019, 02:34 PM

Hi Eyup,

Maybe you did not understood the original question. The title says "weekends AND holidays".

Or should I understand that I can do something like call twice the DisableDates one with days of the week and one with all my holidays

.DisableDates(DayOfWeek.Saturday, DayOfWeek.Sunday).DisableDates([holidayDate1, holidayDate2, ...])
0
Eyup
Telerik team
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.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 22 Mar 2019, 02:47 PM

Hi Eyup,

So this has not been improved in the new telerik version. You got to the same solution that I proposed when asked the question.

Thanks

Tags
Date/Time Pickers
Asked by
Kriztine
Top achievements
Rank 1
Answers by
eo
Top achievements
Rank 1
Eyup
Telerik team
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or