KendoUI DatePicker for X-Editable

kdate.js

//kendo date picker for x-editable
(function ($) {
    "use strict";

    var KendoDatePicker = function (options) {
        this.init('kendodatepicker', options, KendoDatePicker.defaults);

        //try parse config defined as json string in data-datepicker
        options.datepicker = $.fn.editableutils.tryParseJson(options.datepicker, true);

        //overriding datepicker config (as by default jQuery extend() is not recursive)
        this.options.datepicker = $.extend({}, KendoDatePicker.defaults.datepicker, options.datepicker);

    };

    //inherit from Abstract input
    $.fn.editableutils.inherit(KendoDatePicker, $.fn.editabletypes.abstractinput);

    $.extend(KendoDatePicker.prototype, {

        render: function () {
            this.$input = this.$tpl.find('input');;
            this.$input.kendoDatePicker(this.options.datepicker);
            this.$input.prop("readonly", true);
        },

        /**
        Default method to show value in element. Can be overwritten by display option.
        
        @method value2html(value, element) 
        **/
        value2html: function(value, element) {
            if(!value) {
                $(element).empty();
                return; 
            }
            $(element).html(value); 
        },
        
        /**
        Gets value from element's html
        
        @method html2value(html) 
        **/        
        html2value: function(html) {        
          /*
            you may write parsing method to get value by element's html
            e.g. "Moscow, st. Lenina, bld. 15" => {city: "Moscow", street: "Lenina", building: "15"}
            but for complex structures it's not recommended.
            Better set value directly via javascript, e.g. 
            editable({
                value: {
                    city: "Moscow", 
                    street: "Lenina", 
                    building: "15"
                }
            });
          */ 
          return null;  
        },

       /**
        Converts value to string. 
        It is used in internal comparing (not for sending to server).
        
        @method value2str(value)  
       **/
       value2str: function(value) {
           var str = '';
           if(value) {
               for(var k in value) {
                   str = str + k + ':' + value[k] + ';';  
               }
           }
           return str;
       }, 
       
       /*
        Converts string to value. Used for reading value from 'data-value' attribute.
        
        @method str2value(str)  
       */
       str2value: function(str) {
           /*
           this is mainly for parsing value defined in data-value attribute. 
           If you will always set value by javascript, no need to overwrite it
           */
           return str;
       },                
       
       /**
        Sets value of input.
        
        @method value2input(value) 
        @param {mixed} value
       **/         
       value2input: function(value) {
           if(!value) {
             return;
           }
           this.$input.val(value);
       },       
       
       /**
        Returns value of input.
        
        @method input2value() 
       **/          
       input2value: function() { 
           return this.$input.val();
       },        
       
        /**
        Activates input: sets focus on the first field.
        
        @method activate() 
       **/        
       activate: function() {
            this.$input.focus();
       },  
       
       /**
        Attaches handler to submit form in case of 'showbuttons=false' mode
        
        @method autosubmit() 
       **/       
       autosubmit: function() {
           this.$input.keydown(function (e) {
                if (e.which === 13) {
                    $(this).closest('form').submit();
                }
           });
       }       

    });

    KendoDatePicker.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {

        /**
        @property tpl 
        @default <input type="text">
        **/         
        tpl: '<div class="editable-kendodatepicker"><input type="text" name="kendodate"></div>',

        /**
        @property inputclass 
        @default null
        **/         
        inputclass: null,
        /**
        Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br>
        See list of tokens in [momentjs docs](http://momentjs.com/docs/#/parsing/string-format)  
        
        @property format 
        @type string
        @default YYYY-MM-DD
        **/         
        format:'MM-dd-yyyy',
        /**
        Format used for displaying date. Also applied when converting date from element's text on init.   
        If not specified equals to `format`.
        
        /**
        Configuration of kendodatepicker.
        
        @property datepicker
        @type object
        @default null
        **/
        datepicker: null

    });

    $.fn.editabletypes.kendodatepicker = KendoDatePicker;

}(window.jQuery));

Thanks for sharing. Would love to see a working JSFiddle or COdepen style example of this custom datepicker integration with X-Editable. In anycase thanks for sharing im sure it will come in handy for my future projects to study for integrating other libraries!

I'm curious have you happen to have integrated any other libraries? I have my eye open all the time to see what kind of custom functionality people have done with X-Editable!