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

DatePicker restrict days... almost

6 Answers 237 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Fabien
Top achievements
Rank 1
Fabien asked on 19 Nov 2015, 09:13 PM

Hello,

 

I saw everywhere that we can't really restrict days in the DatePicker so I decided to find a workaround. It worked strangely till I realized that it was not my fault:

  

data-bind="events: { open: filterAllButSaturday }, etc..."

 

filterAllButSaturday: function (e) {
        var allDays = $('#AdjustmentDate_dateview').find('.k-link');
 
        allDays.each(function()
        {
            if ($(this).attr('data-value') === 'undefined' || new Date($(this).attr('data-value')).getDay() != 6) {
                $(this).bind('click', function() { return false; });
            }
        });
    }

 

This solution would have worked just great if the data-value was not messed up:

 

<a tabindex="-1" class="k-link" href="#" data-value="2015/10/17" title="Tuesday, November 17, 2015">17</a>

 

Now I almost found a workaround for a problem that seem to piss off many people, I'd like not to have to switch to Bootstrap which seems to incorporate this feature pretty well. could I have a bit of help to make it work please?

 

Thanks a lot.

6 Answers, 1 is accepted

Sort by
0
Fabien
Top achievements
Rank 1
answered on 19 Nov 2015, 09:15 PM
PS: little precision on the problem. data-value has 10 as month while we are in November and it should be 11.
0
Fabien
Top achievements
Rank 1
answered on 19 Nov 2015, 09:19 PM

 Meanwhile I feel dirty:

 

allDays.each(function()
       {
           if ($(this).attr('data-value') !== 'undefined') {
               var date = new Date($(this).attr('data-value'));
               date.setMonth(date.getMonth() + 1);
 
               if (date.getDay() != 6) {
                   $(this).bind('click', function() { return false; });   
               }
           }
       });
 

 

 

0
Fabien
Top achievements
Rank 1
answered on 19 Nov 2015, 09:28 PM

That solution doesn't even work properly since if the user select another month then the grid refresh... can I bind on this event rather than "open" ?

Each time the grid refreshes then I'd like to execute my code.

 

Thanks.

0
Eyup
Telerik team
answered on 23 Nov 2015, 01:02 PM
Hello Fabien,

Thank you for demonstrating such fervor for this matter. I will be glad if we come up with a viable solution for your scenario, moreover, if it proves applicable for other developers as well.

I suggest that you check the navigate event handler of the inner Calendar:
http://docs.telerik.com/kendo-ui/api/javascript/ui/calendar#events-navigate


This way you will be able to execute your filterAllButSaturday logic every time. This is achieved using the pickerObject.dateView.calendar approach. You can examine the following sample:
http://jsbin.com/eyUdeni/2/edit?html,js,output

You can also check the templates demo:
http://demos.telerik.com/aspnet-mvc/datepicker/template

I hope this will prove helpful.

Regards,
Eyup
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Fabien
Top achievements
Rank 1
answered on 23 Nov 2015, 01:45 PM
Thanks a lot, I will try to find something with all these hints.
0
Eyup
Telerik team
answered on 24 Nov 2015, 09:02 AM
Hello Fabien,

Please take your time to examine the suggestions and feel free to turn to us if new questions arise.

Regards,
Eyup
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
Fabien
Top achievements
Rank 1
Answers by
Fabien
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or