Formatting Dates in Repeater

Ask the community
,
1

I am still very new to this. I tried the following code, which works but doesn’t. There are two issues here.

First, it takes literally 10-30 seconds from page load until the date areas are populated. That won’t work, as visitors will be off elsewhere long before.

Second, it formats the date as desired, but the date doesn’t change from item to item (same date in each repeated item).

Suggestions? Thanks.

//after page load
$w.onReady( function () {

// Get the date from the date field of the current item
//const classstdate = $w(“#dataset10”).getCurrentItem().startDate;
//const classendate = $w(“#dataset10”).getCurrentItem().endDate;
const wkshpstdate = $w(“#dataset8”).getCurrentItem().startDate;
const wkshpendate = $w(“#dataset8”).getCurrentItem().endDate;
const spevstdate = $w(“#dataset9”).getCurrentItem().startDate;
const spevendate = $w(“#dataset9”).getCurrentItem().endDate;
const ctastdate = $w(“#dataset7”).getCurrentItem().callBegins;
const ctaendate = $w(“#dataset7”).getCurrentItem().deadline;

// various date display configurations
const MoDa = { month: “short”, day: “numeric” }; // Jan 18
const HrMn = { hour: “numeric”, minute: “numeric” }; // 12:45
const DOW = { weekday: “long” }; // Monday
const DOWMoDa = { weekday: “long”, month: “short”, day: “numeric” }; // Monday, Jan 18
const Full = { weekday: “long”, month: “short”, day: “numeric”, hour: “numeric”, minute: “numeric” }; // Monday, Jan 18, 12:45

// Set the text element to display the date using the user’s settings
//$w(“#text36”).text = classstdate.toLocaleDateString(“en-US”, Full);
$w(“#text39”).text = wkshpstdate.toLocaleDateString(“en-US”, MoDa);
$w(“#text52”).text = wkshpendate.toLocaleDateString(“en-US”, MoDa);
//if(spevstdate !==null){
$w(“#text64”).text = spevstdate.toLocaleDateString(“en-US”, Full);
//}
//$w(“#text65”).text = spevendate.toLocaleDateString(“en-US”, Full);
$w(“#text47”).text = ctastdate.toLocaleDateString(“en-US”, MoDa);
$w(“#text49”).text = ctaendate.toLocaleDateString(“en-US”, MoDa);
});

2

Clairence,

For perspective, since coding is “very new” to you, be aware that you have not chosen a beginner’s task to develop your skills with. But I understand: it’s the task that you most want to complete, so you’re diving in.

Regarding load times, repeaters can be very slow loaders. It will be difficult, perhaps impossible, for a repeater, tied to numerous records and with many elements placed on it, to load quickly. To get a better idea of what’s involved, check out this post that has an innovative approach to a page with many repeaters on it

As far as getting each item of the repeater to display that record’s dates, take a look at the ForEachItem function. It would be a way to apply this very particular code to each repeater item.

3

Thanks, Anthony. I’m a WordPress/PHP guy, and this Wix/js stuff is baffling to me.
Is there something specific in the code I shared that might be problematic?

The page in question has six repeaters, but the data behind them - in total - currently represents less than a dozen records. I shudder to think how long it will take once the datasets fill out. I will have a look at ForEachItem, assuming it behaves differently from getCurrentItem. And I’m going to play around with the suggestions in that post you shared.

4

not sure what you’re exactly trying to do but i have dates on reviews lef tin repeaters and i used this code:

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

    console.log(itemData._createdDate);      
    console.log(itemData._createdDate.getDate().toString()); 
    console.log(monthNames[itemData._createdDate.getMonth()]); 
    console.log(itemData._createdDate.getFullYear().toString());

const strDate = itemData._createdDate.getDate().toString();
const strMonth = monthNames[itemData._createdDate.getMonth()];
const strYear = itemData._createdDate.getFullYear().toString();

    $w("#submissionTime").text = strDate + " " + strMonth + " " + strYear; 

});

});

5

After a lot of trial and error following the myriad divergent suggestions here, I settled on this setup, which works for me:

// GET WIX DATA READY
import wixData from ‘wix-data’;

// WHEN PAGE READY
$w.onReady( function () {

// workshops 
$w("#dataset8").onReady( () => { 
  // when repeater is ready 
  $w("#repeater5").onItemReady( ($w, itemData, index) => {

const monthNames = [“JAN”, “FEB”, “MAR”, “APR”, “MAY”, “JUN”, “JUL”, “AUG”, “SEP”, “OCT”, “NOV”, “DEC”];
const startDate = itemData.startDate.getDate().toString();
const endDate = itemData.endDate.getDate().toString();
const startMonth = monthNames[itemData.startDate.getMonth()];
const endMonth = monthNames[itemData.endDate.getMonth()];
const startTime = itemData.startTime.toString();
const endTime = itemData.endTime.toString();
const startTimeDisp = startTime.substring(0,5); // returns hh:mm
const endTimeDisp = endTime.substring(0,5); // returns hh:mm
const trial=itemData.startDate;

// FORMAT DATE TEXT OUTPUT PER ABOVE CONSTANTS
$w(“#text39”).text = startMonth + " " + startDate + " - " + endMonth + " “+endDate;
$w(”#text52").text = startTimeDisp + " - " + endTimeDisp;
…etc.