How to display date correctly in "DD/MM/YYYY"

Tags: #<Tag:0x00007f136b4fcb00>
#1

I have a handsontable in which there is a date column

{data: "pohComDate", type: 'date', dateFormat: 'DD/MM/YYYY', correctFormat: true}

which I able to successfully saved in database and then retrieved in handsontable. But while retrieving I couldn’t able to control its display look. I want the date to be displayed as “DD/MM/YYYY” but it is being displayed as

image.png1054×231 15.1 KB

I have tried to use custom render but its not working. Can you share resolution for this?

1 Like
#2

Hi @dasguptahirak

at the first glance, it looks like the table hasn’t been reloaded. Is double clicking any of the date cells changes the format to the one you would like to have?

#3

@aleksandra_budnik
Yes on double click calendar opens up and when closed, the format gets corrected automatically.

On double click calendar appears like this:

After calendar gets closed, date format comes as desired:

#4

Try to add instance.render() method after table initializes. It should rebuild the table and change the format.

correctFormat for date is not working
#5

I have exactly the same problem, i tried:

var hot = new Handsontable(hotElement, hotSettings);
Handsontable.hooks.add('afterInit', afterInitFunction);
Handsontable.hooks.add('afterLoadData', afterInitFunction);


function afterInitFunction(){
    hot.render();
}

But it doesn’t work. Any workaround pls?

#6

Don’t you get any errors logs for that code @even-mind?

Please try

 var hot = new Handsontable(hotElement, hotSettings);
Handsontable.hooks.add('afterLoadData', afterInitFunction);


setTimeout(function(){
   hot.render();
}, 50)
#7

Unfortunately it doesn’t work, i dont have errors in console.

You can check it here: https://jsfiddle.net/8zvxbfvk/6/

Dates of data object are in MM/DD/YYYY and i would like to display them id MM.DD.YYYY.

When i click on a date and then click outside the date transforms in MM.DD.YYYY format but it doesn’t on table init.

#8

Thank you for sharing. You’re right - it doesn’t work for double dots. I’ve checked if the MomentJS is supporting this format using this demo https://codepen.io/anon/pen/VXrEmG - and it does, so the issue should be on our side.

Please let me check it and get back to you.

#9

Ok thank you. For information even the conversion from MM-DD-YYYY to MM/DD/YYYY doesn’t work.

#10

Hi again @even-mind

Can you replace hot.render() with hot.validateCells()?

#11

Doesn’t work :confused:

#12

Hm… that is strange. It works for me on JSFiddle and a local machine.

Can you check the console (if there are any logs)?
What browser/OS are you using?
What is your programming environment (frameworks, libs)?

#13

Can you please share a working jsfiddle? There is no logs in the console. Im on MacOS & Chrome and I dont use wrappers/frameworks. Thank you

#14

Sure’ here’s the example https://jsfiddle.net/handsoncode/27kqn2qo/
ps. I have also deleted afterInitFunction (290-291) reference as there is no function like this in this demo, which caused the log

Uncaught ReferenceError: afterInitFunction is not defined

and stopped my validateCells method from executing.

#15

Oh ok I see, it’s working now but I have a huge table (1000k elements) so the validation occurs like 5s after the table initialisation… Is there a way to validate cells On Init ?

#16

You can try to use a smaller offset to allow table to render faster https://docs.handsontable.com/pro/1.18.1/Options.html#viewportColumnRenderingOffset
https://docs.handsontable.com/pro/1.18.1/Options.html#viewportRowRenderingOffset
but there is no way to make it work on init, as the validator changes the values as it runs after data is loaded.

You would need to change the data source format.

#17

Thank you !

#18

You’re welcome

#19