I have a site that I am using to manage my business, and our booking diary. The bookings options offered by wix didnt really fit our needs, so I created my own using velo and the content manager.
We occasionally need to add extra slots to our booking diary, and to do so I have a date selector to choose where the slot should go.
I started having issues when I noticed the date selector automatically picks 00:00 as the time. I used code to change this value when entering, so it changes all new slots to 11:00am. This works fine as I use a different field in the diary to record the times of the bookings. I now have staff working from another timezone, which has complicated things further. When someone from the other timezone submits a new slot, the time is time is coming in as 12:00, rather than 11:00.
This is an issue as I have divider rows in the database to separate each date, and now the 12:00 slots are falling onto the following day.
Essentially what I need help with is making the time on the date object always come in as 11:00 despite what the local timezone is.
I’m sure this a fairly straightforward function, but I’m struggling to figure it out. JS date objects just dont agree with my brain!
If it is worth noting, my time zone is Spain, and the other timezone is England.
Thanks in advance, I’ll post my code below
import wixData from 'wix-data';
import wixLocation from 'wix-location';
export function createSlot_click(event) {
let charterDate = $w("#datePicker1").value;
charterDate.setHours(11)
console.log(charterDate)
let boatSelected = $w("#dropdown1").value;
console.log(boatSelected)
let timeDay = $w("#radioGroup1").value;
console.log(timeDay)
wixData.query("FLEETPROFILE")
.eq("title", boatSelected)
.find()
.then((boatResults)=> {
let boatItem = boatResults.items[0]
console.log(boatSelected)
let toInsert = {
"charterDate": charterDate,
"boat": boatItem.title,
"boatref": boatItem,
"ampm": timeDay,
"bookingStatus": "AVAILABLE"
}
wixData.insert("DIARY", toInsert)
.then( (doneResults) => {
let item = doneResults;
let slotHours = doneResults.charterDate.getHours()
console.log(slotHours)
$w("#slotCreated").show()
} )// end of insert
})//end of query then
}//end of click
Page, this is definitely NOT straightforward in JS. Actually, it’s a nightmare. I ran into it also and solved it, but I need some more info. First, I will tell you what the cause is, then I will ask you some questions.
The cause
When you, in Spain, choose 11:00 AM using datePicker (DP), it writes a UTC +0 date to the collection. Since Spain is UTC +1, it will write 10:00 AM to the collection, so in Content Manager (CM) it will display as 11:00. CM uses browser locale to CALCULATE the date in your time zone. So if people from UK look in CM at YOUR date (input from Spain), they will see 10:00, because London is also +0:00.
If people from UK choose 11:00, 11:00 will be written (London = also UTC +0:00). But when YOU look at it from Spain (UTC +1:00), it will display as 12:00. Maddening!
Questions
- with what kind of apps do you LOOK at/display dates? CM only, or forms and lists you developed yourself?
- what is the country which should GOVERN (= from which country do we start defining dates from now on)?
3)do you expect more input from other time zones in the future, or can we safely assume UK and Spain are it for now?
Hi Giri,
Thank you so much for your reply, that is really helpful! Being only able to check this from my timezone has made understanding how it works a little difficult!
- The dates are displayed across the site in repeaters mostly, dynamic pages and in triggered emails (for sending booking forms and confirmations off to clients). But the time in the date object is not used, only the date, as I have used different fields for the booking time in the content manager. So the time in the date field is just used to sort the booking diary, I’ll attach a screen shot below.
- The business is based in Spain, and this should be where the times are correct. (A bit of background; I have a boat charter company, so I am using this site to manage our bookings. No clients use the site, only my staff, and I have a couple members of staff who work from the UK. So all the charters take place in Spain, on Spanish time.)
- It will most likely only be from the UK and Spain.
As you can see below, I have a repeater displaying my diary. This is sorted by charter date (far left column), then by boat. It isn’t necessary to sort by the time of the charter, or even use the time in the date object for anything. As you can see I have separate start and finish time columns, which it seems are not affected by timezone.
The blacked out row is a divider that I have put in between every date, to make the diary easier to read. Every row in the diary has the time of the date object set to 11, so they will always stay in the correct order, however when someone from the UK submits a new slot, it has been setting the time as 12:00. This means that the new slot, despite saying the 22/8/21, will fall below the black divider, and look as though it is on the 23/8/21.
I hope I have explained this well enough, I may have overdone it!
Thanks for your time Giri!
I found a very simple solution to this!
I wrote a short data hook, which gets the hours in the date object, and if it isn’t 11, it changes them to 11. Which will always be in the correct timezone, as the back end will follow the timezone set for my site.
Just had my employees in the Uk check and it worked great!
let hoursDate = item.charterDate.getHours()
if(hoursDate === 11){
}else{
item.charterDate.setHours(11)
}
Great. I understand from your reply that you have no public reservation form where people from all over the world can make reservations with, just internally from UK and Spain. In that case, your solution should work. Good job.
Yes that’s correct, the site is just being used to manage bookings, staff hours and jobs, maintenance etc.
Thanks for your help!
