Date from collection is always fully displayed

Ask the community
,
1

Hi
i have a collection that have a column for date. When i fetch that date using “Connected to Data” button to a text box like this:

The date is displayed fully (including time, time zone) as you can see here:


How can i make the text box date to show only the short version (with or without the time), for example :
Mon Jan 2 2017
or
Mon Jan 2 2017 00:00:00

Many thanks for your help.
Roy

2

Hi Roy. I just typed a answer for a simular question yesterday here it should get you going in the right direction. In your case, you’ll need to change the full typed months to abbreviations and do something simular in combination with getDay() (returns 0-6) for the day.

I’ll see if I can get momentjs running somehow, that would make it way easier.

3

Hi Edgar

Thanks for your help!

I have followed your instructions but the code doesn’t work…
The text box (#text40) that should display the short date is connected to the dataset but not to the date column.
i also tried with connecting it to the date column…

i get the next error :

TypeError: Cannot read property ‘getDate’ of undefined

This is my code on the dynamic page :

$w.onReady(function () {
//TODO: write your page related code here…

$w(“#repeater1”).onItemReady( ($w, itemData, index) => {
const monthNames = [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”];

	console.log(itemData.trail_at);		 
	console.log(itemData.trail_at.getDate().toString()); 
	console.log(monthNames[itemData.trail_at.getMonth()]); 
	console.log(itemData.trail_at.getFullYear().toString()); 
	console.log(itemData.trail_at.getHours().toString()); 
	console.log(itemData.trail_at.getMinutes().toString()); 
	
	const strDate = itemData.trail_at.getDate().toString(); 
	const strMonth = monthNames[itemData.trail_at.getMonth()]; 
	const strYear = itemData.trail_at.getFullYear().toString(); 
	const strHour = ("0" + itemData.trail_at.getHours().toString()).slice(-2); 
	const strMinute = ("0" + itemData.trail_at.getMinutes().toString()).slice(-2); 
	
	$w("#text40").text = strDate + " " + strMonth + " " + strYear + " | " + strHour + ":" + strMinute; 
	
});

});

Any advice please?
:slight_smile:

Thanks,
Roy

4

Hi Roy. Sure. ‘trail_at’ is my column for the date. Change it with you column name haveing the date in it.

Oh, also my sample was with a repeater, I don’t now if you are using that?

5

Hi Edgar

Thanks!
That fixed my problem.

Roy

6

Hi Edgar,

i will appreciate if you advise why i am failing to make the dates appear shorter when i am using 2 text boxes.
I have on my page 2 text boxes that show different dates from the same database.
Used your code example but it fails to do the operation on both. (tried of course to modify the code for 2 text boxes…)

I am able to do this only for 1 text box…

Can you share a code example where 2 text boxes are used in the same page to present 2 different dates?

Thanks,
Roy

7

Hi Roy. I’ll try to do it tonight.