Trying to remove time from date in a repeater

Discussion Ask a question
,
1

Hello, I am building a repeater connected to a data collection. I am not a developer. The “Date and Time” field type produces this in my repeater:

Tue Mar 06 2018 00:00:00 GMT-0500 (Eastern Standard Time)

All I want is the date. For two days I have been reading every post on this topic and trying code suggestions and nothing works yet. I would be so grateful for assistance; this is a show-stopper for me. Here is the last code that I tried:
$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.date);		 
	console.log(itemData.date.getDate().toString()); 
	console.log(monthNames[itemData.date.getMonth()]); 
	console.log(itemData.date.getFullYear().toString()); 
	
	const strDate = itemData.date.getDate().toString(); 
	const strMonth = monthNames[itemData.date.getMonth()]; 
	const strYear = itemData.date.getFullYear().toString(); 
	
	$w("#text37").text = strDate + strMonth + strYear; 
	
});

});

And here is the error message in the console:
Loading the code for the Announcements full page page. To debug this code, open tnhqz.js in Developer Tools."2018-03-06T05:00:00.000Z"6March2018"2018-03-05T05:00:00.000Z"5March2018Wix code SDK error: The “src” property cannot be set to “”. It must be a valid URL starting with “http://”, “https://”, or "image://

What am I doing wrong?

Many thanks
Barbara

PS WHEN, oh WHEN, is Wix going to give us more field type choices for date and time?

2

Hi Barbara,

What you are doing wrong is not reading the documentation on the Date class. Please see Date - JavaScript | MDN

What exactly is the format you are wanting? For example, using toDateString() :

var event = new Date(1993, 6, 28, 14, 39, 7);

console.log(event.toDateString());
// expected output: Wed Jul 28 1993

// You could drop the day of the week by doing something like:
// components is an array that looks like ["Wed", "Jul", "28", "1993"]
var components = event.toDateString().split(" ");

// Removes one item from the array, starting at index 0.
// Drop the day, components now looks like ["Jul", "28", "1993"]
components.splice(0, 1);

console.log(components.join(" "));
// expected output: Jul 28 1993

Alternatively, you could use toLocaleString() and provide various arguments to customize the output:

var event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
var locale = 'en-US';
var options = {year: "numeric", month: "2-digit", day: "2-digit"};

console.log(event.toLocaleString(locale, options));
// expected output: 12/19/2012

Please see the documentation to see how this is done: Date.prototype.toLocaleString() - JavaScript | MDN you might want to check the browser compatibility chart at the bottom of the page, though.

As for your error, somewhere in the code you have not shared, you are trying to set the src property of an image or container background to an empty string as opposed to a URL that resolves to an image.

1 Like
3

Hello Nicholas, I think you might have missed the part where I said “I am not a developer!” ;>) I did go look at those resources and they are over my head. But thanks.

To answer your question, I would like the output to be formatted as “Sat May 10, 2018.”

I tried copying and pasting one of your code samples but it did not affect the date output. I don’t see anything that notes the connection between the database column and the output text field in the repeater. Is there something else I should include before and after your code?

VR
Barbara

PS Thanks for explaining the error … that makes sense now. One of my repeater items is missing an image.

4

Hi Barbara,

You can either link a database column to an element on the page using the Wix editor, or you can do it through code which is what you showed in your original post. Which are you doing? Assuming you are doing it via code as above, if you modify it like so:

$w.onReady(function () {
	//TODO: write your page related code here...
$w("#repeater1").onItemReady( ($w, itemData, index) => {
		let locale = "en-US";
		let options = {
			weekday: "short",
			year: "numeric",
			month: "long",
			day: "2-digit"
		};

		$w("#text37").text = itemData.date.toLocaleString(locale, options);
	});		
});

then your text element should contain something like “Sat, May 10, 2018”.

In the editor, click on the Tools menu at the top and make sure the Properties panel is visible. When you click on an element, you’ll be able to change its identifier via the panel. This way, instead of your text element being identified by “text37” you can use something more descriptive like “dateLabel”, for example.

1 Like
5

OH EM GEE, NICHOLAS, YOU DID IT!
It wasn’t just your code! I went back and re-read your first line: “You can either link a database column to an element on the page using the Wix editor, or you can do it through code which is what you showed in your original post.”

And then it hit me … I was trying to do both at the same time! I went back and disconnected the text field from the data column, AND IT WORKED! You have no idea …

May I trouble you for one more question? If I would like to use more than one date field, would I repeat the line, “$w(”#text37").text = itemData.date.toLocaleString(locale, options);" for each text field,

OR

Would I use one instance of “$w(”#text37").text" with the name of several text fields, such as:

$w(“#text37”,“#text38”,“#text39”).text ?

If the latter is correct, what is the correct punctuation and spacing between the items in the series.

A THOUSAND THANKS!

Barbara

6

Hi Barbara,

Again, I would direct you to read the appropriate documentation: Wix Editor Elements ($w) - Velo API Reference - Wix.com

If you pass multiple selectors to the selector function, it returns an array of matched elements. i.e. $w(“#text37”, “#text38”, “#text39”) returns an array of three text elements, assuming you have three text elements on the page with those ids. So in order to select multiple elements and then assign to their respective text properties you would need to do the following:

// Locale and options are laid out in above post
let date = itemData.date.toLocaleString(locale, options);

let elements = $w("#text37", "#text38", "#text39");

// Use a for loop where you explicitly specify the bounds
for (let i = 0; i < elements.length; i++)
{
    elements[i].text = date;
}

// Alternatively, have the bounds be computed automatically for you:
for (var i in elements)
{
    elements[i].text = date;
}

In general, it is considered good programming practice to store the results of a function when you find yourself calling it multiple times and the result that it spits out does not change. As shown in the code block above, I have stored the result of the call to toLocaleString() into a variable called date. This way, the function isn’t being needlessly called at each iteration of the loop. Similarly, if you find yourself using the selector function to select the same element multiple times it might be best to store that reference off into a variable. It may be that it’s just a constant-time lookup into a hash table of some sort, in which case you wouldn’t gain much from doing that, but I don’t know.

Why are you placing the same date into multiple fields, though? I would like to reiterate that it increases code readability when you have appropriately named variables – Instead of “text37”, “text38”, and “text39”, please give them more descriptive names.

1 Like
7

Nicholas, thanks, I will study this, and thanks also for the notes on good practice. Regarding the multiple dates, my data collection will feed a repeater for events, so I need to represent start dates and end dates. I will have contributors select from date pickers in two different columns in the data collection.
Best,
Barbara

8

Hi catherdb,

I have post a article about repeater formatting. You can have a look with it : ).

Good luck. Hope useful,
Heson

1 Like
9

Hi Barbara,

I guess I was just a bit confused as to what you were asking. You can use the same locale and options and pass them to the toLocaleString() call for each of your Date objects. If, however, you are not assigning the same date to multiple text elements the multiple selector/loop won’t do you much good as it would be applying the same date to each of the selected elements.

1 Like
10

Good morning Nicholas! I’m going to dig in and work on this. Can’t tell you how much I appreciate the information offered at three levels: 1) Clear directions to solve my immediate problem 2) guidance on best practices and 3) resources to help me learn more. You’re a great teacher! I’m sure this will help others.

And Heson, thanks very much to you, also, for your guidance on repeaters.

Best
Barbara

11

This is what happens when I use the above code and changing out the elements to match mine.
Any ideas why?

2716×1290 403 KB

12

And heres what the code looks like:

1572×854 73 KB