Working with dates and time in WIX Code?

[andreas-kviby]

There is a lot of people that has problems with dates and time in WIX Code. I have worked hard to understand this and here I share my thoghts.

There is something called servertime in my world, that is the date / time together with the servers timezone. So when you get date / time from server maybe you will get the servers timezone.

There is something called local date / time and that is your users browsers date / time timezone.

So when you work with date / time you might want to check JavaScript Date getTimezoneOffset() Method and think about always storing date / time in UTC and always convert to and from UTC using difference between UTC and your users local time settings.

This is a probleem because usually javascript will execute in the users browser with local settings and sometimes javascript functions will execute on the server.

Have anyone the same thoughts? So in what timezone is the servers placed?

[giri-zano]

Hi Andreas, I am working more or less on the same thing. What I ran into, is the following: the user´s local time settings are also unreliable. It happened to me. I have 2 clocks running, my first in European time and my second in South-American (where I am now) time. Most software checks the user´s “time”, thus time 1. That´s why all my appointments go wrong, they are 4 or 5 hours off.
It would be better to check the IP-block locale to guess what time it is in the user´s location. And always store as UTC and display behind it a local time based on IP time zone. International travellers would have less problems this way.

[wayne]

Hi guys.
Honestly, unless you know javascript well… we are going to struggle. I am learning javascript here… JavaScript Tutorial

I have a quoteDate field in the collection.
I want to add a NUMBER of days to that date to show ad deadlineDate.
25 March 2018 + XX days = ?

How do I add numbers to a date value in the data.js file?

[annie-lucid]

Hi Wayne, I’m working on something similar – setting an “expiration” date 1 year from when a record was created in the database
createdDate + 365 days = …

Did you every get the code working for this?

Thanks!

[wayne]

Hi Annie.

No. I’m still struggling my backside off. Isn’t there a webinar course for Six code?

[andreas-kviby]

Try this

var date = new Date(tt);
    var newdate = new Date(date);

    newdate.setDate(newdate.getDate() + 3); // Adding three days
    
    var dd = newdate.getDate();
    var mm = newdate.getMonth() + 1;
    var y = newdate.getFullYear();

    var someFormattedDate = mm + '/' + dd + '/' + y;

[wayne]

Hi Andreas,
Would you please explain what you are doing.
I get red dots errors saying “tt is undefined”.
Here is my code
The field I need to add to = quoteDate

var quoteDate = new Date(tt); 
var newdate = new Date(quoteDate); 

newdate.setDate(newdate.getDate() + 3); // Adding three days 

var dd = newdate.getDate(); 
var mm = newdate.getMonth() + 1; 
var y = newdate.getFullYear(); 
var someFormattedDate = dd + '/' + mm + '/' + y;

[annie-lucid]

Andreas, thank you, thank you, this worked!

Now… I have another date formatting question. I have 2 dates listed, 1 directly from the database (which I previously formatted using Liran’s code from this post ) then a second date, which is calculated from a date within my database (calculated using code from this article and reformatted using your code above)

So all of the code works correctly (see below), but my problem is that now both dates are formatted differently from one another:

Ideally, I’d like to see both as “Apr 18 2018” (or something similar), but at this point I’ll settle for just having them the same format as each other

Here’s the page code

And here’s the data.js from the backend I’m working with:

Any thoughts?

Thanks in advance

[andreas-kviby]

Make a Function that will take a date and return it in the format you need and run all date outputs through that function.

[andreas-kviby]

tt needs to be a date. Let tt = New Date();

[annie-lucid]

Andreas can you help me out with the code and/or where it should go to do that? I’m surprised I got this far… I’m not entirely sure how to move forward

1. Would the Function be on the page code or the data.js?
2. What would that code look like
3. How do I format the date correctly – I see the split/splice method a lot and I read Wix’s articles but not sure I understand how those work on the dates, and with your method, I’m not sure how to change the XX/XX/XXXX format to Mon XX 201X

Thanks again!

[annie-lucid]

NVM Andreas… got it working! Will post some code & notes shortly. Thanks so so much for your help!

[annie-lucid]

Wayne (and anyone else who needs it) … here’s what I ended up with (it works!!)

1. Show a date from my database
2. Calculate a date X days after the original start date, and show that on the page as well
3. Format both dates to read as Month Date, Year (“April 20, 2018”)

Note: you can format the date any way you need by making a few changes to the line:
// formats date to Month Date, Year
var expDate = longMonth + " " + day + ", " + year;

Here’s the first part of the CODE →

(This goes into data.js in the backend)
export function Members_afterQuery(item) {
item.expDate = setMemberExpDate(item._createdDate);

return item;

function setMemberExpDate(_createdDate) {
var originalDate = new Date(_createdDate);
var date = new Date(originalDate);

// set expiration 1 year 
date.setDate(date.getDate() + 364); 

const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 

const day = date.getDate().toString(); 
const longMonth = monthNames[date.getMonth()]; 
const year = date.getFullYear().toString(); 
	
var expDate = longMonth + " " + day  + ", " + year; 

return expDate.toString(); 

}
}

THEN

(This goes into the page code – in this case, I’m using static text fields on a dynamic page)
$w.onReady(function () {
$w(“#membersDataset”).onReady(() => {
populateCalculatedFields();
reformatJoinDate();
});
});

function populateCalculatedFields() {
const currentItem = $w(“#membersDataset”).getCurrentItem();
$w(“#expDate”).text = currentItem.expDate;
}

function reformatJoinDate() {
let originalDate = $w(“#joinDate”).text;
let date = new Date(originalDate);

const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 

let day = date.getDate(); 
let longMonth = monthNames[date.getMonth()]; 
let year = date.getFullYear(); 
	
$w("#joinDate").text =  longMonth + " " + day  + ", " + year; 

}

A few notes…
I’m sure the function reformatJoinDate can be simplified, as this is mostly a copy of the code in data.js – but I kept getting stuck there, so this works

Also, if you are doing this in a repeater you’ll need to add a line after the onReady
$w(" #repeater1 ").forEachItem( ($w) => {

So Wayne, you’ll need to make a few changes to make this work for you:

1. My expDate becomes your quoteDate
2. Change the “Members” in Members_afterQuery(item) to the name of your database
3. If your original date doesn’t come from the _createdDate, change that as well
4. You’ll need to make changes to the page code as well to connect to your page elements

Good luck, let me know how it goes!

[annie-lucid]

Hi again everyone… I think I jumped the gun – my code “works” but it’s only displaying the most recent database entry in the live version (in preview it works correctly and displays each user’s info on an individual page)

I know I’ve seen this while reading thru the forum, but can’t find a good answer for how to fix my code. Can anyone help?

Andreas maybe?

Thanks!!

[andreas-kviby]

Hey Annie
Are you sure you have the correct permissions setup on the Data Collection? This sometimes mess things and errors up a bit. And also check that you have the correct records in both live and sandbox so you know that the code itself have the same records to work with.

Then come back to me.

#datacollection #sandbox

[annie-lucid]

Hey Andreas

I checked thru everything again… I don’t think there should be an issue with my permissions:

And the sandbox and live versions have all the same fields … plus the only ones I’m referring to in the code itself are _createdDate (which is automatic from Wix), plus expDate (checked this is all right) which is a calculation and works properly in the code in both preview and live… so I think my only issue is the getCurrentUser and related items, which should be what’s directing the dynamic page to each individual user

Right now, when I check on live, it’s actually directing me to a Members page with a userID that’s not associated with any member in my database – which is also confusing

Live site: grounddelivery.org
My member profile should go here: grounddelivery
But instead, if I follow the login process and click the correct buttons – which all use the following code – I end up here every time now: grounddelivery

Button code to get to MY MEMBER PROFILE:
export function accountButton_click() {
wixLocation.to(/Members/${wixUsers.currentUser.id});
}

Not sure what’s going on, so any advice you have would be great! Not sure if I need to verify the user using their email also/instead of the userID …

Let me know what you think! Thanks again!

[annie-lucid]

So, I’m testing everything I can think of, and something else strange seems to be happening…
My user ID as a registered member of the site is 92f412b6-34ce-4df1-b0fc-6029f7de3e4a
and if I type this into the URL, it works and I see my profile… but when I navigate there using my menu & buttons, I always end up at a 404 Error page now with a userID in the URL that doesn’t match any in the database
So I think the issue is definitely with the code on the Members profile page, because on that page I have a button that links to the Members update (ID) dynamic page, and that one works correctly and takes me from my profile to my profile’s update page – so something with getting the current user’s info in my code – which is necessary to calculating my expiration date and reformatting the dates – seems to be my issue … I think

[annie-lucid]

Any suggestions Andreas?

[annie-lucid]

Hi all, I’m STILL stuck on this – any suggestions on how to fix? PLEASE?

[chiu-joe]

I have the following question.
When I new a date and insert into one of the field in my collection.
The new date is a number. ACTUALLY, when I mouse over the field in the collection.
There is a blue word which can automatically convert the number to UTC format.
Is there anything I can insert the data in UTC format without this manual procedure.
Hope someone can help.

var now = new Date();
var utc_timestamp = Date.UTC(now.getUTCFullYear(),now.getUTCMonth(), now.getUTCDate() ,
now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds(), now.getUTCMilliseconds());

//$w(‘#text30’).text = timeDiff.toLocaleString();

let Jinsert = {
“name”: (buttonname),
“start”: utc_timestamp
}
wixData.insert(“AttendDB”, Jinsert)
.then((results) => {
// item = results; //see item below
})
. catch ((err) => {
let errorMsg = err;
});