CanvasItem to manipulate datetime value with separate Date and Time controls


isc.defineClass("SplitDateTimeItem", "CanvasItem").addProperties({
    height:25, width:"*", align:"center",
    colSpan:"*", endRow:false, startRow:false,
    dateTitle:"Date", timeTitle:"Time",

    createCanvas:function () {
        return isc.DynamicForm.create({
            width:this.width, height:this.height,
            wrapItemTitles:this.containerWidget.wrapItemTitles,
            numCols:4,
            items:[
                {
                    name:"dateOnly", type:"date", width:100, canEdit:false, startRow:false, endRow:false, title:this.dateTitle,
                    changed:function(form, item, value) {
                        var time = form.getValue("timeOnly");
                        var logicalDate = isc.Date.create(value.getFullYear(), value.getMonth(), value.getDate());
                        form.canvasItem.storeValue(new Date(logicalDate.getTime() + isc.Time.createLogicalTime(time.getHours(), time.getMinutes() - logicalDate.getTimezoneOffset(), time.getSeconds()).getTime()));
                    }
                },
                {
                    name:"timeOnly", type:"time", width:50, startRow:false, endRow:false, title:this.timeTitle,
                    changed:function(form, item, value) {
                        var date = form.getValue("dateOnly");
                        var logicalDate = isc.Date.create(date.getFullYear(), date.getMonth(), date.getDate());
                        form.canvasItem.storeValue(new Date(logicalDate.getTime() + isc.Time.createLogicalTime(value.getHours(), value.getMinutes() - logicalDate.getTimezoneOffset(), value.getSeconds()).getTime()));
                    }
                }
            ]
        });
    },
    showValue:function (displayValue, dataValue, form, item) {
        if (this.canvas == null) {
            return;
        }
        var logicalDate = dataValue ? isc.Date.createLogicalDate(dataValue.getFullYear(), dataValue.getMonth(), dataValue.getDate()) : null;
        var logicalTime = dataValue ? isc.Time.createLogicalTime(dataValue.getHours(), dataValue.getMinutes(), dataValue.getSeconds()) : null;
        this.canvas.setValue("dateOnly", logicalDate);
        this.canvas.setValue("timeOnly", logicalTime);
        this.storeValue(dataValue);
    }
});

sample usage:


 {
    name:"DATE_ITME_ITEM",
    editorType:"SplitDateTimeItem", showTitle:false, colSpan:2, timeTitle:"Time", dateTitle:"Date"
}