Creating a wrapper for DatePicker default functionality

2 posts, 1 answers
  1. David Casey
    David Casey avatar
    1 posts
    Member since:
    Dec 2016

    Posted 13 Dec 2016 Link to this post

    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

  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3725 posts

    Posted 15 Dec 2016 Link to this post

    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.
Back to Top