Simple plugin for x-editable for using pikaday datepicker.

x-editable-pikaday.js

(function ($) {

    var PikadayEditable = function (options) {
        this.init('pikaday', options, PikadayEditable.defaults);
    };

    $.fn.editableutils.inherit(PikadayEditable, $.fn.editabletypes.abstractinput);    
    
    $.extend(PikadayEditable.prototype, {
        render: function () {
            this.initPicker();
            $.fn.editabletypes.text.prototype.renderClear.call(this);
        },

        initPicker: function () {
            opts = $.extend({}, this.options.datepicker, {
                field: this.$input[0]
            });
            this.picker = new Pikaday(opts);

            // Stop x-editable from destroyig the picker
            $(this.picker.el).click(function(e){
                e.stopPropagation();
            });
        },

        value2input: function(value) {
           this.picker.setDate(value, true);
        },

        input2value: function() {
           return this.html2value(this.picker.toString());
        },        

        activate: function() {
            this.picker.show();
        },

        toggleClear: function() {
           this.picker.setDate(null, true);
        },

        autosubmit: function() {
            that = this;
            this.options.datepicker.onSelect = function(e) {
                var $form = $(that.$input).closest('form');
                setTimeout(function() {
                    $form.submit();
                }, 200);
                
            }
            
            this.picker.destroy();
            this.initPicker()
        }

    });
    
    PikadayEditable.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        /**
        @property tpl 
        @default <input type="text"/>
        **/         
        tpl:'<input type="text"/>',
        /**
        @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>
        Full list of tokens: http://momentjs.com/
        
        @property format 
        @type string
        @default yyyy-mm-dd
        **/          
        format:'YYYY-MM-DD', 
        
        /**
        Configuration of datepicker.
        Full list of options: https://github.com/dbushell/Pikaday/
        
        @property datepicker 
        @type object
        @default {
           firstDay: 0, 
           changeYear: true, 
           changeMonth: true
        }
        **/
        datepicker: {
            firstDay: 1,
            format: 'YYYY-MM-DD',
            yearRange: [1900,2012]
        },       
    });

    $.fn.editabletypes.pikaday = PikadayEditable;

}(window.jQuery));