DatetimeField

以前用Zapatec Calendar。试用了下extjs的时间控件， DateField中没有time信息。看了下Datepicker, 估计想改出来也不是一会的事。还是改改 Zapatec Calendar，接着用吧。用一个TriggerField做为时间控件，修改了下Calendar-setup.js。去掉了暂时不用的东西，修改事件触发的相关部分。

calendar_setup = function(params) {
     params['ifFormat'] = '%m/%d/%Y %H:%M:%S';
     params['singleClick'] = true;
     params['showsTime'] = true;
     params['sortOrder'] = "asc";
     params['timeFormat'] = "24";
     params['align'] = "Br";
     params['range'] = [1900, 2999];
     params['weekNumbers'] = true;
     params['sortOrder'] = "asc";
     params['timeFormat'] = "24";
     params['electric'] = true;
     params['step'] = 2;
     params['cache'] = false;
     params['showOthers'] = false;
     params['fdowClick'] = false;
     params['disableFdowChange'] = false;
     params['numberMonths'] = 1;
     params['controlMonth'] = 1;
     params['vertical'] = false;
     params['monthsInRow'] = params.numberMonths;

    function onSelect(cal) {
        var p = cal.params;
        var inputField = params.inputField.el.dom;
        var update = (cal.dateClicked || p.electric);
        if (update && p.flat) {
            if (typeof p.flatCallback == "function")
            {
               if (!p.multiple) //User can call function submitFlatDates directly in Calendar object to handle the submission of multiple dates.
                    p.flatCallback(cal);
            } else
                    alert("No flatCallback given -- doing nothing.");
            return false;
        }
        if (update && inputField) {
            inputField.value = cal.currentDate.print(p.ifFormat);
            if (typeof inputField.onchange == "function")
                    inputField.onchange();
        }
        if (update && p.singleClick && cal.dateClicked)
            cal.callCloseHandler();
        if (update && typeof p.onUpdate == "function")
            p.onUpdate(cal);
    };

    if (params.flat != null) {
        if (typeof params.flat == "string")
                params.flat = document.getElementById(params.flat);
        if (!params.flat) {
                alert("Calendar.setup:\n  Flat specified but can't find parent.");
                return false;
        }
        var cal = new Zapatec.Calendar(params.firstDay, params.date, params.onSelect || onSelect);
        cal.disableFdowClick = params.disableFdowChange;
        cal.showsOtherMonths = params.showOthers;
        cal.showsTime = params.showsTime;
        cal.time24 = (params.timeFormat == "24");
        cal.timeInterval = params.timeInterval;
        cal.params = params;
        cal.weekNumbers = params.weekNumbers;
        cal.sortOrder = params.sortOrder.toLowerCase();
        cal.setRange(params.range[0], params.range[1]);
        cal.setDateStatusHandler(params.dateStatusFunc);
        cal.getDateText = params.dateText;
        cal.numberMonths = params.numberMonths;
        cal.controlMonth = params.controlMonth;
        cal.vertical = params.vertical;
        cal.yearStep = params.step;
        cal.monthsInRow = params.monthsInRow;
        cal.helpButton = !params.noHelp;
        if (params.ifFormat) {
            cal.setDateFormat(params.ifFormat);
        }

        var inputField = params.inputField.el.dom;
        if (inputField && inputField.type == "text" && typeof inputField.value == "string") {
                cal.parseDate(inputField.value);
        }

        if (params.multiple) {
           cal.setMultipleDates(params.multiple);
        }
        cal.create(params.flat);
        cal.show();
        return cal;
    }

    var triggerEl = params.inputField;
    triggerEl.onTriggerClick = function() {
        var dateEl = params.inputField.el.dom;
        //FIX for Enter key!
        if (triggerEl.blur) {triggerEl.blur();}
        var dateFmt = params.inputField ? params.ifFormat : params.daFormat;
        var mustCreate = false;
        var cal = window.calendar;

        if (!(cal && params.cache)) {
                window.calendar = cal = new Zapatec.Calendar(params.firstDay,
                                                     params.date,
                                                     params.onSelect || onSelect,
                                                     params.onClose || function(cal) {
                                                             if (params.cache)
                                                                     cal.hide();
                                                             else
                                                                     cal.destroy();
                                                     });
                cal.disableFdowClick = params.disableFdowChange;
                cal.showsTime = params.showsTime;
                cal.time24 = (params.timeFormat == "24");
                cal.timeInterval = params.timeInterval;
                cal.weekNumbers = params.weekNumbers;
                cal.numberMonths = params.numberMonths;
                cal.controlMonth = params.controlMonth;
                cal.vertical = params.vertical;
                cal.monthsInRow = params.monthsInRow;
                cal.historyDateFormat = params.ifFormat || params.daFormat;
                cal.helpButton = !params.noHelp;
                mustCreate = true;
        } else {
                if (params.date)
                        cal.setDate(params.date);
                cal.hide();
        }

        if (params.multiple) {
           cal.setMultipleDates(params.multiple);
        }

        cal.showsOtherMonths = params.showOthers;
        cal.yearStep = params.step;
        cal.setRange(params.range[0], params.range[1]);
        cal.params = params;
        cal.setDateStatusHandler(params.dateStatusFunc);
        cal.getDateText = params.dateText;
        cal.setDateFormat(dateFmt);
        if (mustCreate)
                cal.create();
        if (dateEl) {
                var dateValue;
                //figure out if the it's in value or innerHTML
                if (dateEl.value) {
                        dateValue = dateEl.value;
                } else {
                        dateValue = dateEl.innerHTML;
                }
                if (dateValue != "") { //if there is a date to initialize from
                        var parsedDate = Date.parseDate(dateEl.value || dateEl.innerHTML, dateFmt);
                        //This check for when webmaster initializes the box with something like
                        //"check in"
                        if (parsedDate != null) { //if it's parsable
                            cal.setDate(parsedDate);
                        }
                }
        }

        var position = triggerEl.getPosition();
        cal.showAt(position[0], (position[1] + 21));

        return false;
    };

    return cal;
};

var triggerF = new Ext.form.TriggerField({
                        id: 'deleteFrom',
                        triggerClass: 'x-form-date-trigger',
                        readOnly: true,
                        fieldLabel: 'From',
                        name: 'from',
                        anchor:'95%'});

var fromCal = new calendar_setup({inputField:triggerF});

在ie6, ff3下正常。

今天试了下别人改写的extjs dateField（http://extjs.com/forum/showthread.php?t=21931），但是我这里显示不正常。有功夫再研究一下怎么改他本来的控件。