KendoUI DateTimePicker for X-Editable

kdatetime.js

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

    var KendoDateTimePicker = function (options) {
        this.init('kendodatetimepicker', options, KendoDateTimePicker.defaults);

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

        //overriding datetimepicker config (as by default jQuery extend() is not recursive)
        this.options.datetimepicker = $.extend({}, KendoDateTimePicker.defaults.datetimepicker, options.datetimepicker);
        //console.log('datyetime : '+ this.options.datetimepicker.format);
    };

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

    $.extend(KendoDateTimePicker.prototype, {

        render: function () {
            //$.each( this.options, function(i, n){
            //     console.log( "Name: " + i + ", Value: " + n );                 
            //});
            this.$input = this.$tpl.find('input');;
            this.$input.kendoDateTimePicker(this.options.datetimepicker);
            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();
                }
           });
       }       

    });

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

        /**
        @property tpl 
        @default <input type="text">
        **/         
        tpl: '<div class="editable-kendodatetimepicker"><input type="text" name="kendodatetime"></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 hh:mm tt',
        /**
        Format used for displaying date. Also applied when converting date from element's text on init.   
        If not specified equals to `format`.
        
        /**
        Configuration of kendodatetimepicker.
        
        @property datetimepicker
        @type object
        @default null
        **/
        datetimepicker: null

    });

    $.fn.editabletypes.kendodatetimepicker = KendoDateTimePicker;

}(window.jQuery));