SpreadJS DatePickerCellType

by Ross Dederer

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.3.20143.15.css">
<script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.3.20143.15.js"></script>
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.32/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.input.min.js"></script>
<div id="ss" style="width: 550px; height: 400px; border: 1px solid gray" />

JavaScript

$(document).ready( function() {
function DatePickerCellType() {
}
DatePickerCellType.prototype = new $.wijmo.wijspread.CustomCellType();
DatePickerCellType.prototype.createEditorElement = function () {
    //Create input presenter.
    var number = document.createElement("input");

    return number;
};
DatePickerCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
    //Initialize input editor.
    if (editorContext) {
        $editor = $(editorContext);
        $.wijmo.wijspread.CustomCellType.prototype.activateEditor.apply(this, arguments);
        $editor.css("width", cellRect.width -3);
        $editor.css("height", cellRect.height - 3);

        var inputDate = new wijmo.input.InputDate(editorContext);        
        //this.parent = $(inputDate);
       // $editor.datepicker();
        //this.parent = $editor;
        
        
        this.parent.css("position", "absolute");
        this.parent.css("top", $editor.css("top"));
        this.parent.css("left", $editor.css("left"));
        this.parent.attr("gcUIElement", "gcEditingInput");
    }
}
DatePickerCellType.prototype.deactivateEditor = function (editorContext, context) {
    //Remove input editor when end editor status.
    if (editorContext) {
        var element = editorContext;
        
        while (element) {
            if (element.parentNode === document.body) {
                $(element).datepicker( "hide" );
                $(element).datepicker( "destroy" );
                document.body.removeChild(element);

            } else {
                element = element.parentNode;
            }
        }
    }
};
DatePickerCellType.prototype.setEditorValue = function (editor, value, context) {
    //Sync value from Cell value to editor value.
    $(editor).datepicker("setDate", value);
};
DatePickerCellType.prototype.getEditorValue = function (editor, context) {
    //Sync value from editor value to cell value.
    return...