Question

这就是我所拥有的（相关部分）。

Handsontable选项：

data: [[new Date(2013,5,26,17,00,00),24.7025,null,29.018950276,19.7746530531,null,null,null,null,null,null,55,110,165,220], ...

columns: [{type:'date', dateFormat: 'mm/dd/yy'},{type: 'numeric',format: '0,0.00'}, ...

结果显示在动手日期单元格中：

Wed Jun 26 2013 17:00:00 GMT+0200 (Romance Daylight Time)

我想将其显示为“dd-MM-yyyy HH：mm”，但我还没有找到办法...显示器似乎始终坚持默认日期格式，如上所示

Answer 1

在这种情况下，您可以使用自定义渲染器。

我创建了jquery.handsontable.exts.js，并用handsontable.js加载它。

此示例脚本使用renderFormat或dateFormat属性正确呈现日期。

    /**
    * Handsontable date renderer
    * @param {Object} instance Handsontable instance
    * @param {Element} TD Table cell where to render
    * @param {Number} row
    * @param {Number} col
    * @param {String|Number} prop Row object property name
    * @param value Value to render (remember to escape unsafe HTML before inserting to DOM!)
    * @param {Object} cellProperties Cell properites (shared by cell renderer and editor)
    */
    Handsontable.DateRenderer = function (instance, TD, row, col, prop, value, cellProperties) {
        if (value && typeof value == "object" && value.constructor == Date) {
            // Date!
            var format = cellProperties.renderFormat || cellProperties.dateFormat || "";
            value = $.datepicker.formatDate(format, value); //value.format(format);
        }
        if (cellProperties.readOnly)
            Handsontable.TextRenderer(instance, TD, row, col, prop, value, cellProperties);
        else
            Handsontable.AutocompleteRenderer(instance, TD, row, col, prop, value, cellProperties);
    };

    Handsontable.DateCell.renderer = Handsontable.DateRenderer;
    Handsontable.cellLookup.renderer.date = Handsontable.DateRenderer;

Answer 2

你可以使用jExcel这个非常相似的jquery电子表格插件来做到这一点。

<div id="my"></div>

data = [
    ['Mazda', 2001, 2000, '2006-01-01 00:00:00'],
    ['Pegeout', 2010, 5000, '2005-01-01 00:00:00'],
    ['Honda Fit', 2009, 3000, '2004-01-01 00:00:00'],
    ['Honda CRV', 2010, 6000, '2003-01-01 00:00:00'],
];

$('#my').jexcel({
    data:data,
    colHeaders: ['Model', 'Date', 'Price', 'Date'],
    colWidths: [ 300, 80, 100, 100 ],
    columns: [
        { type: 'text' },
        { type: 'numeric' },
        { type: 'numeric' },
        { type: 'calendar', options: { format:'DD/MM/YYYY HH24:MI', time:1 } },
    ]
});

https://jsfiddle.net/ahqv89ja/2/

http://www.bossanova.uk/jexcel/using-a-calendar-column-type

Answer 3

4年后，我在Handsontable documentation找到了答案。无论如何，我以为我会分享......

hot = new Handsontable(container, {
    data: getDataFromSomewhere(),
    colHeaders: ['SomeText', 'SomeDate'],
    columns: [
      {
        // 1st cell is simple text, no special options here
      },
      {
        type: 'date',
        dateFormat: 'MM/DD/YYYY',
        correctFormat: true,
        defaultDate: '01/01/1900'
      }
    ]
});

这样做的缺点是你需要使用三个额外的库：

/dist/moment/moment.js
/dist/pikaday/pikaday.js
/dist/pikaday/css/pikaday.css

它会自动添加一个daypicker（这不是我想要的......我也需要HH:mm。）

Answer 4

    columns: [
        { data: 'Changed', renderer: dateTimeRenderer, readOnly: true },
    ],

function dateTimeRenderer(instance, td, row, col, prop, value, cellProperties) {
    value = typeof value === "undefined" ? '' : new Date(value).toLocaleString();
    return Handsontable.renderers.TextRenderer(instance, td, row, col, prop, value, cellProperties);
}

日期显示在handsontable

4 个答案: