SpreadJS DatePickerCellType
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>
<div id="ss" style="width: 550px; height: 400px; border: 1px solid gray" />
JavaScript
function DatePickerCellType() {
}
DatePickerCellType.prototype = new $.wijmo.wijspread.CustomCellType();
DatePickerCellType.prototype.createEditorElement = function () {
//Create input presenter.
var number = document.createElement("input");
var $number = $(number);
$number.attr("type", "input");
$number.css("font-size", "10pt");
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);
$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");
$(".ui-datepicker").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...