Date formatting

Getting help Questions
,
1

Hi, I have an issue with formatting date values. I want to be able to set different dateFormat for different date columns.

On frontend javascript I receive JSON data:

columns = [{
  correctFormat: true
  data: "Valid From*"
  dateFormat: "YYYY-MM-DD
  type: "date"}, ...]

data: [{
  Valid From*: "Tue, 01 Oct 2024 00:00:00 GMT"
  ...}, ...]

I convert “Valid From*” value from string to Date:
data[i]["Valid From*"] = new Date(data[i]["Valid From*"])

Then i create handsontable object, with custom renderer (though this shoulnd’t be a problem):

renderer: function (instance, td, row, col, prop, value) {
      Handsontable.renderers.TextRenderer.apply(this, arguments);
      if (value != null) {
        td.innerHTML = `<div class="text-truncate"">${value}</div>`;
      }
    },

In UI the displayed text is not formatted, but stays “Tue, 01 Oct 2024 00:00:00 GMT”. I’ve tried:
data[i]["Valid From*"] = new Date(data[i]["Valid From*"]).toISOString().split("T")[0]

but this won’t work if I try to have dateFormat with hours/minutes/seconds.

2

Hi @kragelj.valentin

The linked custom cell renderer seems to only truncate the text (I pasted it other topic some time ago).

Could you please prepare a demo and share expected output format (for editor and renderer)?

3

I am confused now. I copy pasted basic example from documentation ( Date cell type - JavaScript Data Grid | Handsontable ) and changed dateFormat to ‘YYYY-MM-DD’. But the dates in the table don’t change to this format. What am I missing?

4

Date formatting is applied after validation.

Please run your_instance.validateCells() after the instance is set.

1 Like
5

Validation is needed when you pass dates in different syntax that what is set in the format.

6

Thank you, validateCells() solved the issue. Should this be mentioned in the documentation in the pasted link?

7

Yes, you are right. Based on the documentation it seems that setting up correctFormat to true will do the job.

I will make an internal note to alter the page.

8

Thank you! Last question, how do I check if date format is valid? Can I use ddd, YYYY, MM, DD, HH, mm and ss in any format?

E.g. will these work?
“YYYY MM-DD HH:ss”
“ss:HH:mm YYY”

In addition, it is possible to get financial quarters? (Q1, Q2, Q3, Q4)

9

Handsontable uses MomentJS library to display dates.

We should be able to handle all of the date formats available in MomentJS. Here Moment.js | Docs you can find the list.

1 Like
10

Thank you for the link, works great now.

1 Like
11

You’re welcome, @kragelj.valentin

I’m closing the thread as solved. However, if ui’d need anything lease feel free to create a new thread or contact us at support@handsontable.com