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

Creating a wrapper for DatePicker default functionality

1 Answer 130 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
David Casey
Top achievements
Rank 1
David Casey asked on 13 Dec 2016, 04:55 PM
01.(function() {
02. 
03.jQuery(document).ready(function() {
04.    jQuery('#datepicker1').myKendoDatepicker({
05.        disabled: [new Date('12/25/2016').getTime(), 0, 6]
06.    });
07.});
08. 
09.jQuery.fn.myKendoDatepicker = function(options) {
10.    jQuery(this).each(function() {
11.        var dp = MyKendoDatepicker().init(this, options);
12.    });
13.    return this;
14.};
15. 
16.var MyKendoDatepicker = function(el) {
17.    return {
18.        defaults: {
19.            disableDates: function(date) {
20.                console.log(this);
21.                return date && (this.disabled.indexOf(date.getTime()) !== -1 || this.disabled.indexOf(date.getDay()) !== -1);
22.            },
23.        },
24. 
25.        init: function(el, options) {
26.            this.opts = jQuery.extend(true, this.defaults, options);
27.            return jQuery(el).kendoDatePicker(this.opts);
28.        },
29. 
30.    };
31.};
32. 
33.})();

I'm trying to create a wrapper that will allow us to set up default functionality for our datepicker. The previous code is just a simple starting point to illustrate my problem--I will be implementing more than just disabled dates. Unfortunately, I am not able to get a hold of my wrapper or even the actual input element once inside your "Datepicker" or "Calendar" objects (line 20). Any suggestions on how to accomplish my requirements? Am I missing something that would let me pass this object or grab the input the datepicker is acting upon (where I could place a reference to my object)?

thanks for you help.

david

1 Answer, 1 is accepted

Sort by
0
Accepted
Georgi Krustev
Telerik team
answered on 15 Dec 2016, 09:42 AM
Hello David,

I would suggest you check our documentation on the topic:

http://docs.telerik.com/kendo-ui/intro/widget-basics/create-custom-kendo-widget

Also you can see the given practices in action in this how-to demo:

http://docs.telerik.com/kendo-ui/controls/editors/datepicker/how-to/date-masking-using-maskedtextbox

Regards,
Georgi Krustev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Date/Time Pickers
Asked by
David Casey
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Share this question
or