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

5 posts, 1 answers
  1. Masa
    Masa avatar
    5 posts
    Member since:
    Aug 2018

    Posted 29 Oct 2018 Link to this post

    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.

  2. Georgi
    Admin
    Georgi avatar
    572 posts

    Posted 31 Oct 2018 Link to this post

    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.
  3. Masa
    Masa avatar
    5 posts
    Member since:
    Aug 2018

    Posted 09 Nov 2018 in reply to Georgi Link to this post

    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>

  4. Answer
    Georgi
    Admin
    Georgi avatar
    572 posts

    Posted 13 Nov 2018 Link to this post

    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.
  5. Masa
    Masa avatar
    5 posts
    Member since:
    Aug 2018

    Posted 13 Nov 2018 in reply to Georgi Link to this post

    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>

Back to Top