Showing dates in handsontable

Question

Showing dates in handsontable

Here is the relevant section of what I currently have.

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

The displayed date in the handsontable cell appears as:

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

I am trying to change it to "dd-MM-yyyy HH:mm" format without success. The default date format persists despite attempts to modify it.

javascript handsontable

Answer 1

Answer №1

If you encounter this situation, a custom renderer can be utilized.

To address this issue, I have developed jquery.handsontable.exts.js and it is being imported alongside handsontable.js.

This specific snippet of code employs either the renderFormat or dateFormat property to accurately display dates.

    /**
    * Custom Handsontable date renderer
    * @param {Object} instance Handsontable instance
    * @param {Element} TD Table cell where the rendering occurs
    * @param {Number} row
    * @param {Number} col
    * @param {String|Number} prop Property name from the row object
    * @param value Value to render (ensure unsafe HTML characters are escaped before insertion into DOM!)
    * @param {Object} cellProperties Cell properties shared by renderer and editor
    */
    Handsontable.DateRenderer = function (instance, TD, row, col, prop, value, cellProperties) {
        if (value && typeof value === "object" && value.constructor === Date) {
            // It's a 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

If you encounter this situation, a custom renderer can be utilized.

To address this issue, I have developed jquery.handsontable.exts.js and it is being imported alongside handsontable.js.

This specific snippet of code employs either the renderFormat or dateFormat property to accurately display dates.

    /**
    * Custom Handsontable date renderer
    * @param {Object} instance Handsontable instance
    * @param {Element} TD Table cell where the rendering occurs
    * @param {Number} row
    * @param {Number} col
    * @param {String|Number} prop Property name from the row object
    * @param value Value to render (ensure unsafe HTML characters are escaped before insertion into DOM!)
    * @param {Object} cellProperties Cell properties shared by renderer and editor
    */
    Handsontable.DateRenderer = function (instance, TD, row, col, prop, value, cellProperties) {
        if (value && typeof value === "object" && value.constructor === Date) {
            // It's a 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 3

Answer №2

After a lengthy search, I finally stumbled upon the solution in the Handsontable documentation. Despite my initial doubts, I decided to share it here...

hot = new Handsontable(container, {
    data: getDataFromSomewhere(),
    colHeaders: ['SomeText', 'SomeDate'],
    columns: [
      {
        // The first cell contains simple text with no special configurations
      },
      {
        type: 'date',
        dateFormat: 'MM/DD/YYYY',
        correctFormat: true,
        defaultDate: '01/01/1900'
      }
    ]
});

The downside is that you'll need to implement three additional libraries:

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

This setup also includes a daypicker by default (which wasn't my preferred choice... I needed to include HH:mm as well).

Answer 4

After a lengthy search, I finally stumbled upon the solution in the Handsontable documentation. Despite my initial doubts, I decided to share it here...

hot = new Handsontable(container, {
    data: getDataFromSomewhere(),
    colHeaders: ['SomeText', 'SomeDate'],
    columns: [
      {
        // The first cell contains simple text with no special configurations
      },
      {
        type: 'date',
        dateFormat: 'MM/DD/YYYY',
        correctFormat: true,
        defaultDate: '01/01/1900'
      }
    ]
});

The downside is that you'll need to implement three additional libraries:

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

This setup also includes a daypicker by default (which wasn't my preferred choice... I needed to include HH:mm as well).

Answer 5

Answer №3

    display: [
        { info: 'Edited', transform: dateTransformer, lockEditing: true },
    ],

function dateTransformer(dataInstance, tableData, record, column, property, dataValue, cellOptions) {
    dataValue = typeof dataValue === "undefined" ? '' : new Date(dataValue).toLocaleString();
    return Handsontable.renderers.TextRenderer(dataInstance, tableData, record, column, property, dataValue, cellOptions);
}

Answer 6

    display: [
        { info: 'Edited', transform: dateTransformer, lockEditing: true },
    ],

function dateTransformer(dataInstance, tableData, record, column, property, dataValue, cellOptions) {
    dataValue = typeof dataValue === "undefined" ? '' : new Date(dataValue).toLocaleString();
    return Handsontable.renderers.TextRenderer(dataInstance, tableData, record, column, property, dataValue, cellOptions);
}

Showing dates in handsontable

Answer №1

Answer №2

Answer №3

Similar questions

Setting a variable prior to receiving feedback in Javascript

Selecting a Child Component in Vue.js: A Guide to Specifying the Correct Component

What strategies can I use to handle components that rely on changes in the angular $state when launching a new window via $state.href?

Utilizing JavaScript to control the visibility of a div based on radio button selection without the need

transforming JSON key names by associating them with their corresponding JSON values and modifying the key names

refresh polymer components or make an ajax request within a custom element

DreamFactory's REST API POST request for rest/user/session consistently encounters errors in Internet Explorer 9

Is it possible to apply a delay function to JQuery's AjaxStart/Stop events?

Having trouble dismissing Bootstrap alerts in TypeScript?

Leveraging Javascript to generate universal HTML content for various Javascript files

How to utilize a parameter value as the name of an array in Jquery

Struggling to design a functional mobile keyboard

React has identified a modification in the sequence of Hooks invoked, however, I am unable to locate any Hooks being invoked conditionally

Take two inputs, divide them, and then multiply the result by 100

Enhancing multiple documents in mongoDB with additional properties

Would it be better to lock a variable stored in req.session, or opt for a massive global variable instead?

Steps to set up gapi-script authentication with next-auth in a Next.js application

Leveraging JSON data to dynamically create HTML elements with multiple class names and unique IDs, all achieved without relying on

JavaScript causing display issues with Unicode characters

I'm perplexed as to why my JavaScript code isn't successfully adding data to my database