Here is what I have (the relevant part of it).

Handsontable options:

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'}, ...

Result as shown in the handsontable date cell:

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

I would like to show it as "dd-MM-yyyy HH:mm", but I haven't found a way to do so... the display seems to always stick to the default date format, as shown above.

Here is what I have (the relevant part of it).

Handsontable options:

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'}, ...

Result as shown in the handsontable date cell:

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

I would like to show it as "dd-MM-yyyy HH:mm", but I haven't found a way to do so... the display seems to always stick to the default date format, as shown above.

• javascript
• handsontable

Share Improve this question Follow asked Jul 1, 2013 at 16:44 Xavier PeñaXavier Peña 7,91999 gold badges6464 silver badges105105 bronze badges 3

• can't you use to_date function?? – TechBytes Commented Jul 1, 2013 at 16:47
• In my case (for other reasons regarding patibility with other objects) the source must remain in the native javascript date, which in this example is new Date(2013,5,26,17,00,00). My only margin here is to force Handsontable to format this native javascript date into a formatted string through its option columns. – Xavier Peña Commented Jul 1, 2013 at 16:58
• Could you show your full handsontable initialization code and perhaps some more background? – PostureOfLearning Commented Jul 2, 2013 at 20:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

In such case you can use custom renderer.

I have created jquery.handsontable.exts.js and I'm loading it with handsontable.js.

This sample script uses renderFormat or dateFormat property to render the date correctly.

    /**
    * 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.AutopleteRenderer(instance, TD, row, col, prop, value, cellProperties);
    };

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

It's 4 years later and I've found the answer in the Handsontable documentation. I thought I would share anyway...

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'
      }
    ]
});

The downside of this is that you need to use three extra libraries:

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

And it automatically adds a daypicker (which is not what I wanted anyway... I need to have HH:mm as well).

    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);
}