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

Disable by days of weeks AND by a list of specified dates.

4 Answers 780 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Masa
Top achievements
Rank 1
Masa asked on 29 Oct 2018, 04:37 PM

Is there any way to disable date by both?  Such as to disable it by all Tuesdays and Thursdays in addition to by a list of specific dates recorded in the database?

I see it how to disable date picker by days of weeks or by a list of specific dates at the demo.   I found the example of the way to disable weekends and dates specified(holidays). But the not finding a solution for the case that I need it to be implemented.

Thank you.

4 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 31 Oct 2018, 01:00 PM
Hello Masa,

A possible solution is to pass a handler to the DisableDates setting and return true for the dates that should be disabled.

e.g.

@(Html.Kendo().DatePicker().Name("picker").DisableDates("handler"))
 
<script>
    var datesFromDataBase = [new Date(2018,9,15)]
    function handler(x) {
        if (x) {
            return x.getDay() === 1 || datesFromDataBase.indexOf(x) > 0; //disable mondays and the dates from the array
        }
    }
</script>


Regards,
Georgi
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
Masa
Top achievements
Rank 1
answered on 09 Nov 2018, 11:29 PM

Thank you for your response. The below code will get Tuesdays and Thursdays disabled but not the specific dates (11/10/2018, 11/11/2018 and 11/12/2018)  Am I missing anything?

@(Html.Kendo().DatePicker()

    .Name("Date1")
    .Value(Model.Date1)
    .DisableDates("handler")                                         
)

<script>

    var datesFromDataBase = [new Date(2018, 10, 10), new Date(2018, 10, 11), new Date(2018, 10, 12)]
 
    function handler(x) {
        if (x) {
            return x.getDay() === 2 || x.getDay() === 4 || datesFromDataBase.indexOf(x) > 0; 
        }
    }

</script>

0
Accepted
Georgi
Telerik team
answered on 13 Nov 2018, 03:03 PM
Hi Masa,

Indeed the current implementation will not work as the dates are actually objects. A possible solution is to map them to strings,

e.g.

@(Html.Kendo().DatePicker()
 
        .Name("Date1")
        .DisableDates("handler")
)
 
<script>
 
    var datesFromDataBase = [new Date(2018, 10, 10), new Date(2018, 10, 11), new Date(2018, 10, 12)];
    var mapedDates = datesFromDataBase.map(x => x.toString());
 
    function handler(x) {
        if (x) {
            return x.getDay() === 2 || x.getDay() === 4 || mapedDates.indexOf(x.toString()) >= 0;
        }
    }
 
</script>


Regards,
Georgi
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
Masa
Top achievements
Rank 1
answered on 13 Nov 2018, 06:19 PM

Thank you. It works. The below is my code, just in case anyone wants to disable dates from the dates passed as part of a view model.

<script>

    var closedDates = "@string.Join(",", Model.ClosedDates)".split(',').map(x => new Date(x));
    var mappedDates = closedDates.map(x => x.toString());


    function handler(x) {        
        if (x) {
            return x.getDay() === 2 || x.getDay() === 4 || mappedDates.indexOf(x.toString()) >= 0;
        }
    }

</script>

Tags
Date/Time Pickers
Asked by
Masa
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Masa
Top achievements
Rank 1
Share this question
or