so the format is currently showing like that because eventbrite api sets that 2018-05-14 @ 19:00:00
how do i make it so that my date show as May 14, 2018 @ 7:00 pm ?
the date is being imported from "eventStart" : event.start.local,
import {retrieveEvents} from 'backend/eventapi';
$w.onReady(function () {
$w("#EventRepeater").hide();
let suggestions = [];
let item = [];
retrieveEvents().then(function(resp) {
let predictions = resp.events;
predictions.forEach(function(event, index) {
if(index < 3) {
item = {
"_id" : event.id,
"eventname" : event.name.text,
"eventdescription": event.description.text,
"eventlink" : event.url,
"eventStart" : event.start.local,
"eventEnd" : event.end.local,
"eventImg" : event.logo.url
};
suggestions.push(item);
}
});
$w("#EventRepeater").data = suggestions;
});
$w("#EventRepeater").onItemReady(($w, itemData, index) => {
const text1 = $w("#text2");
text1.text = itemData.eventname;
const text2 = $w("#text1");
let str1 = String(itemData.eventdescription);
let strLength = 180;
if(str1.length > strLength) {text2.text = itemData.eventdescription.slice(0, strLength);} else { text2.text = itemData.eventdescription;}
const button2 = $w("#button2");
button2.link = itemData.eventlink;
const text3 = $w("#text3");
text3.text = itemData.eventStart.split('T').splice(0, 4).join(' @ ');
const text4 = $w("#text4");
text4.text = itemData.eventEnd.split('T').splice(0, 4).join(' @ ');
const image1 = $w("#image1");
image1.src = itemData.eventImg;
$w("#EventRepeater").show();
});
});
Dan,
You will have to check your own code and see where you save your data, and what you named your fields. Remember, if you are using results from a collection, you must use field key and NOT field name.
Good luck,
Yisrael
For “date that i get from the backednd” that date comes from the “object” (or data set) “eventstart” and the date changes daily. It’s a list of upcoming events. So it is not one specific day... but rather a date that is pulled from the source.
what would that be called? it is data.eventstart? would it be the text box? would it be the 'eventstart' from 'eventstart = data.eventstart'
We are unable to provide full code solutions. Wix provides many resources to help users learn how to get the most out of Wix Code. We encourage users to take advantage of these resources which include video tutorials, full app examples (which can be loaded into the user's editor), API documentation, and a wealth of articles describing a wide range of topics - from beginner to advance.
Thank you for your understanding, and best of luck with your coding,
Yisrael
For “date that i get from the backednd” that date comes from the “object” (or data set) “eventstart” and the date changes daily. It’s a list of upcoming events. So it is not one specific day... but rather a date that is pulled from the source. How would i write that? And what changes would have to be made to the code you sent earlier? Could you post the whole code in full with the changes i am inquiring about?!
My code formats the date and time as you requested in your original post:
how do i make it so that my date show as May 14, 2018 @ 7:00 pm ?
You need to call these functions as I showed in a previous post and set it to whatever field in the Repeater you want.
As an example, using the the date that you get from the backend:
let date = < date that you get from the backend > let str = formatDate(date) + " @ " + formatTime(date); $w("#textFieldInTheRepeaterThatYouWant").text = str;
Put this in the code that sets the repeater fields. If you want the format "mm-dd-yyyy hh:mm am/pm", then you will have to change the code that I posted.
Of course, you will still need to fix the errors in your code before things work will work properly.
Good luck,
Yisrael
I am unsure how to implement the code
You provided. I am trying to change the format of the date in the. “Repeater” from. “Yyyy-mm-dd HH:mm:ss” to “mm-dd-yyyy hh:mm am/pm.
The date is being imported from the api that is set up on the backend.
I don't see the date code that you're having problems with. In addition, there are many errors in the code.
https://www.royalsynergyproductions.com/test
Please post the URL of your site. Only authorized Wix personnel can get access to your site in the editor.
says "let str = formatDate(date) + " @ " + formatTime(date);" str is undefined
import {retrieveEvents} from 'backend/eventapi';
$w.onReady(function () {
$w("#EventRepeater").hide();
let suggestions = [];
let item = [];
retrieveEvents().then(function(resp) {
let predictions = resp.events;
predictions.forEach(function(event, index) {
if(index < 3) {
item = {
"_id" : event.id,
"eventname" : event.name.text,
"eventdescription": event.description.text,
"eventlink" : event.url,
"eventStart" : event.start.local,
"eventEnd" : event.end.local,
"eventImg" : event.logo.url
};
suggestions.push(item);
}
});
$w("#EventRepeater").data = suggestions;
});
$w("#EventRepeater").onItemReady(($w, itemData, index) => {
const text1 = $w("#text2");
text1.text = itemData.eventname;
const text2 = $w("#text1");
let str1 = String(itemData.eventdescription);
let strLength = 180;
if(str1.length > strLength) {text2.text = itemData.eventdescription.slice(0, strLength);} else { text2.text = itemData.eventdescription;}
const button2 = $w("#button2");
button2.link = itemData.eventlink;
const text3 = $w("#text3");
text3.text = itemData.eventStart.split('T').splice(0, 4).join(' @ ');
const text4 = $w("#text4");
text4.text = itemData.eventEnd.split('T').splice(0, 4).join(' @ ');
const image1 = $w("#image1");
image1.src = itemData.eventImg;
function formatDate(date_obj) {
const monthNames = [
"Jan", "Feb", "Mar",
"Apr", "May", "Jun", "Jul",
"Aug", "Sep", "Oct",
"Nov", "Dec"
];
let day = date_obj.getDate();
let monthIndex = date_obj.getMonth();
let year = date_obj.getFullYear();
return monthNames[monthIndex] + ' ' + day + ', ' + year;
}
function formatTime(date_obj) {
// formats a javascript Date object into a 12h AM/PM time string
var hour = date_obj.getHours();
var minute = date_obj.getMinutes();
var amPM = (hour > 11) ? "pm" : "am";
if (hour > 12) {
hour -= 12;
} else if (hour === 0) {
hour = "12";
}
if (minute < 10) {
minute = "0" + minute;
}
return hour + ":" + minute + amPM;
}
let date = new Date();
let str = formatDate(date) + " @ " + formatTime(date);
$w("#EventRepeater").show();
});
});
Dan,
Try these routines:
function formatDate(date_obj) { const monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; let day = date_obj.getDate(); let monthIndex = date_obj.getMonth(); let year = date_obj.getFullYear(); return monthNames[monthIndex] + ' ' + day + ', ' + year; } function formatTime(date_obj) { // formats a javascript Date object into a 12h AM/PM time string var hour = date_obj.getHours(); var minute = date_obj.getMinutes(); var amPM = (hour > 11) ? "pm" : "am"; if (hour > 12) { hour -= 12; } else if (hour == 0) { hour = "12"; } if (minute < 10) { minute = "0" + minute; } return hour + ":" + minute + amPM; }
Use them like this:
let date = new Date(); let str = formatDate(date) + " @ " + formatTime(date);
This will give you the desired date format.
I hope this helps,
Yisrael
i am trying to learn! thats why I am asking!
We appreciate your interest in really getting the most out of Wix Code and how much you want to learn. Please understand that if you are going to work with code extensively in the product and not just the features in the user interface, you will need to familiarize yourself with basic coding concepts to accomplish what you want. We are happy to get you pointed in the right direction and get you started with what the code should look like, but you’ll need to take it from there.
You may also want to check out the WixArena - it's a hub where you can look for Wix Code (and other) experts for hire.
Thanks for your understanding.
sadly..none of that is clicking with me... idk what to put here....
Hi Dan,
Here are a couple of references where you can learn how to format the date and time just about any way you want:
https://javascript.info/date
https://docs.microsoft.com/en-us/scripting/javascript/date-and-time-strings-javascript
https://www.w3schools.com/js/js_date_formats.asp
Good luck,
Yisrael