Change date output format in a repeater

Ask the community
,
1

I created a collection for events. When displaying a list of all events in a repeater, two date elements for each item should be converted into the format DD.MM.YYYY that is standard in our country. I tried it with the following code, but it only changes the date for the first item:

import wixData from ‘wix-data’;
// export function dsJahresprogramm_ready() {

$w.onReady( function () {
// wait for dataset to be ready
$w(“#dsJahresprogramm”).onReady( () => {
// get data from the dataset for each repeater item
$w(“#repeater1”).forEachItem( ($w, itemData, index) => {
// Get the start date from the date fields of the current item
console.log (“title of stat date” + $w(“#titelStartDatum”).value + itemData.endeDatum);
console.log (“itemData.startDatum: " + itemData.startDatum);
// Set the text element to display the date using the user’s settings
let convertedStartDate = itemData.startDatum.toLocaleDateString(“de”);
console.log (“converted start date: " + convertedStartDate)
$w(”#startDatum”).text = itemData.startDatum.toLocaleDateString(“de”);
console.log (“title of end date” + $w(“#titelEndeDatum”).value + itemData.endeDatum);
console.log ("itemData.endeDatum: " + itemData.endeDatum);

    // Get the end date from the date fields of the current item --> hide if empty 
    **if**  (itemData.endDatum === "") { 
       $w("#titelEndeDatum").hide(); 
       $w("#endeDatum").hide(); 
       } 
    **else**  { 
       **let**  convertedEndDate = itemData.endDatum.toLocaleDateString("de"); 
       console.log ("converted end date: " + convertedEndDate) 
       $w("#endeDatum").text = itemData.endDatum.toLocaleDateString("de"); 
       console.log ("itemData.endDatum: " + itemData.endDatum); 
       } 
  } ); 
} );

} );

The repeater output looks like this:

732×542 11.3 KB

What do I need to change so that the date elements are converted for all repeater items?

How can I add sub-titles like “January 2018”, February 2018" etc. when a new month begins?

It would be nice if somebody could help me to make this repeater work correctly.

2

You will need to use For Each Item to make it loop through the entire Repeater

3

Thank you for your answer. I already have this in my code:

// get data from the dataset for each repeater item 
$w(" [#repeater1](https://www.wix.com/code/home/forum/search/posts%3Fquery=%23repeater1) ").forEachItem( ($w, itemData, index) => {

Is this line in the wrong position? What do I have to change?

4

Thomas can you post the public page URL that you are having problems with?

Another thing you could do is console.log the itemData that the forEachItem is delivering in case there is a data problem.

Steve

5

Hi Thomas,

I had the same requirement as you. This example helped me to change the date format in my repeater .

Good luck!
Ben

6

Thank you to everybody for the tips I got.
I found the solution after some trials. The problem is that the second date field in the collection is not allways recorded (empty). Therefore I have to check that date field for the values “null” and “undefined” to prevent an error on the date conversion. The following code now runs like expected:

import wixData from ‘wix-data’;
$w.onReady(function () {
$w(“#dsEventsYear”).onReady( () => {
// get data from the dataset for each repeater item
$w(“#repeater1”).forEachItem( ($item, itemData, index) => {
// Get the start date from the date fields of the current item
let originalStartDate = itemData.startDate;
let originalEndDate = itemData.endDate;
console.log(“original start date: " + originalStartDate)
console.log(“original end date: " + originalEndDate)
// convert start date to local format
let convertedStartDate = originalStartDate.toLocaleDateString(“DE-ch”);
$item(”#startDate”).text = convertedStartDate;

  if (originalEndDate === null || originalEndDate === undefined) { 
     console.log("original end date is empty"); 
     $item("#titleEndDate").collapse(); 
     $item("#endDate").collapse(); 
     } 
  else { 
    let convertedEndDate = originalEndDate.toLocaleDateString("DE-ch"); 
    console.log ("converted end date: " + convertedEndDate); 
    $item("#endDate").text = convertedEndDate; 
    $item("#titleEndDate").expand(); 
    $item("#endDate").expand(); 
    } 
} );

} );
} );