Formatting Date

Hello everyone,

I have a repeater that is displaying data from a collection, including a text box that is linked to a date field. The date is displayed in the following format :


and I would like it to only show, the “Wed Dec 13 2017” part.

Any thoughts on how to achieve this?

Thanks

Hi,

There’s no built in way to do it, but you can easily do so by code.
Let’s say you have the date on a variable called ‘originalDate’ something like that:

const newDate = originalDate.split(' ').splice(0, 4).join(' ');
$w('#text1').text = newDate;

Some references:
Array.split(), Array.join(), Array.splice() .

Good Luck!
Liran.

Hi Liran,

Thank you very much for your quick reply.
I must however admit, I am new to coding and am not sure how to implement this.

The text box that is connected to the Date field is called : “#text21
So i assume my code should look something like the following?

$w.onReady(function () {
	//TODO: write your page related code here...
const newDate = originalDate.split(' ').splice(0, 4).join(' ');
$w('#text21').text = newDate;
});

What do i replace ‘originalDate’ by?

originalDate is just the current string you have,
So just add:

const originalDate = $w('#text21').text;

Right before

const newDate = originalDate.split(' ').splice(0, 4).join(' ');

Good luck :slight_smile:
Liran.

Hi there, I’m attempting to do this myself. Is this all the code that’s needed? it’s not working for me :confused:

$w.onReady(function () {
	const originalDate = $w("#date1").text;
const newDate = originalDate.split(' ').splice(0, 4).join(' ');
$w('#date1').text = newDate;
 console.log('Time removed from Date/Time Stamp');
});

The console log runs, but I don’t know what’s going on in general.

Hi Liran,
I’m afraid I agree with GCC, my code is not working either. I tried implementing it on a text that is not within a repeater but still doesn’t do anything.

This is the code i used:

$w.onReady(function () {
const originalDate = $w('#repeaterdate').text;
const newDate = originalDate.split(' ').splice(0,4).join(' ');
$w('#repeaterdate').text = newDate;
});

Can you please share links to your sites?

Is there a way to send you the website by dm, would rather not post about it just yet.

Here’s the link to the page my repeater is on.

redacted link

Please let me know when I can delete the link.

Hi GCC and jq579,

Your code is almost enough, please note that when using it in a repeater, you need to use forEachItem() .

Liran.

I have no idea what I’m doing… lol :sweat_smile:
I’ve tried

This

$w.onReady(function () {
$w("#repeater1").forEachItem( ($w) => {
const originalDate = $w("#date1").text;
const newDate = originalDate.split(' ').splice(0, 4).join(' ');
$w('#date1').text = newDate;
 console.log('Time removed from Date/Time Stamp ' + newDate);
	});
});

Even this…

import wixData from 'wix-data';

$w.onReady(function () {
	wixData.query("Photo-Library")
	.hasAll("created", date)
	.find()
	.then( (results) => {
		let items = results.items;
		
		items.forEachItem((date) => {
			if (date.created === true) {
				const originalDate = $w("#date1").text;
const newDate = originalDate.split(' ').splice(0, 4).join(' ');
$w('#date1').text = newDate;
 console.log('Time removed from Date/Time Stamp ' + newDate);
			}
		});
	});	
});

#Clueless

Don’t know if this will help, but;
On the console log, newDate shows as the default placeholder text. Not as a date.

The second one won’t work.

Can you please share a link to your site, and the name of the page?

I FIXED IT! By myself, I can’t believe it! lmao
I put it in a Dataset onReady function.


$w.onReady(function () {
	$w("#photoData").onReady( () => {
$w("#repeater1").forEachItem( ($w) => {
const originalDate = $w("#date1").text;
const newDate = originalDate.split(' ').splice(0, 4).join(' ');
$w('#date1').text = newDate;
 console.log('Time removed from Date/Time Stamp: New Date ' + newDate);
	});
});
});

You can also use a Date Picker element to display dates without the time.

If your Dataset mode is set to “Read-only,” the Date Picker element will display the date but will not be clickable, so it will not display the calendar part of the element.

GCC, what do you mean by “I put it in a Dataset onReady function?” I tried this and got an error “onReady is undefined”

Hey DellaJean,
If you look at the code shared,
On the first line is the regular onReady, and on the second line there’s another onReady function.

$w("#photoData").onReady ( () => {

This is the dataset onReady Function. #photoData is the property name of my dataset. So adding this into the code makes sure that the dataset has been fully loaded before executing the code.

The first onReady doesn’t execute the code until the page is loaded the dataset onReady doesn’t execute the code until the dataset is loaded.

So in the code I shared in a few comments above, it says on Page Ready, make sure dataset is fully loaded, then execute the code.

Genius! It worked! Thanks so much GCC!

You’re most welcome! I’m no genius, it took me days to figure that little treasure out! Now when code doesn’t work as expected (involving datasets), I always add a dataset onReady to see if that fixes it.

Hey there, I came across a little snag with the code I posted earlier. If you limit the amount of items shown using the manage dataset options, then use the connect button feature to “load more” (and possibly the next/prev actions too, not tested), it will not execute the date formatting code on the newly loaded items.

I fixed this by changing this line;

 $w("#repeater1").forEachItem( ($w) => { 

to this;

$w("#repeater1").onItemReady( ($w) => {

so that the will code execute for each item as it finishes loading.

Cheers!

Hello, stumbled upon this and it was very helpful. But is it possible to change the month format from Jan to January?