I have a date/time field in a data collection and I can use a date picker to choose the date, but I see no way to set the time. I need to specify the time that something is going to occur but there is no discussion on the WIX code documentation or any of the web sites that I have searched on how to do it. Imaging booking an airline ticket and the airline gives you the day of the flight on the ticket but not what time it leaves. This makes for a wasted day at the airport or a missed flight, you see my problem?
2 Likes
Time is a part of the date in Javascript. Look here: JavaScript Date Objects
There is no standard “time”-control available for a Wix form. So you have to make it yourself. Most people use a drop down with 5 or 10 minutes increments.
it unbelievable that they have not implemented a time picker yet on wix
1 Like
Thanks. What I still need to know is lets say I use a date picker to put a date into a variable called DateTimeField and then I use a drop down to get the time. How do I get the time to be part of DateTimeField. Do I append it with a + like I do a text field or is there some other way to set the time without wiping out the date?
@giri-zano This is not responsive to the question posed. I, like @artpuryear, have found the explanations of what exactly a date/time field in a Wix collection is to be less than transparently obvious. People who are accustomed to working with JavaScript point to the w3schools.com website for an answer to a question about the behavior of Wix’s adaptation of JavaScript, but that does not explain what one has to do specifically to do something that should be simple to actually happen.
The new Date() object in JavaScript contains the date and time as measured in milliseconds since 1970, and through some skulduggery, it ends up being rendered as a human-recognizable date and time if the right code is used. That does not tell us how Wix uses that technology to create what it calls a date/time field, nor does it tell us how we can create a value that can be saved to a date/time field and end up with something that looks like a date and time value.
For instance, I have used new Date() and saved it to a d/t field, but all that is saved is a date with no time component at all. I have used new Date().getTime(), which converts the mystical soup that JavaScript calls a date value into the number of milliseconds since 1970 and tried to save that, and what I end up with is a very large number in my collection with an indication of an error as well.
It would be nice if someone would just produce some straightforward code that takes a new Date() object, applies the secret sauce that is necessary to make it incorporate a time element that Wix understands, save it to a d/t field in Wix, and have it end up looking like a date and time when looking at the collection in the Wix editor. That should not be so hard to get, but so far no one has been responsive to this very fundamental question.
I decided to reply to my own message for the sake of saving “time.”
The DatePicker element only produces dates, not times. The TimePicker element will produce time strings. To parse the hour, minute, second, and milliseconds from the Value property of the element, you can use JavaScript’s .split() function to produce an array containing the hour, minute, and second of the time string. In the array element containing the seconds, you could simply discard everything after and including the decimal point. With that information now available, you could use the setHours, setMinutes, and setSeconds functions of JavaScript’s panoply of Date functions to set the hour, minute, and second of a particular date.
Here’s how to put it all together:
var myDate;
// NOTE: You should change the name of the elements below to the names used in your code.
myDate = $w(‘#datePicker1’).value;
// The value you get from the timePicker might be something like “10:47:25.357” meaning:
// 10 hours
// 47 minutes
// 25 seconds
// 357 milliseconds
var myTime = $w(‘#timePicker1’).value;
// Create an array from the timePicker’s value, which is of the type STRING.
var timeArr = myTime.split(‘:’);
// The above line, using my example, would produce an array that looks like this:
// timeArr[0] === 10
// timeArr[1] === 47
// timeArr[2] === 25.357
// Add an array element and split off the milliseconds into the new element.
timeArr.push(timeArr[2].split(‘.’)[1]);
// Store the seconds in the element formerly occupied by seconds.milliseconds
timeArr[2] = timeArr[2].split(‘.’)[0];
// Up to this point you are still working with strings, but the setHours() function requires integers.
// So, convert the string values from the split into integer values.
timeArr[0] = parseInt(timeArr[0], 10);
timeArr[1] = parseInt(timeArr[1], 10);
timeArr[2] = parseInt(timeArr[2], 10);
timeArr[3] = parseInt(timeArr[3], 10);
// Add the time elements to the date value in myDate.
myDate = myDate.setHours(timeArr[0], timeArr[1], timeArr[2], timeArr[3]);
// Finally, save it to your database’s date/time field.
All this is necessary if you want to PICK a date and time using the controls offered by Wix, but if you simply want to grab the actual current time, you can just do the following:
myDate = new Date();
In this case, myDate will hold the date and time.
In either case, you can then save the value of myDate in a Wix collection’s data/time field and end up with something that looks like a date and time.
I ended up deleting my “date/time” field and made a dateTime field that takes “text” as input.
My solution requires you to manually insert your form into the collection. That being said I created an “onClick” event for my “Submit” button and below is the code snippet for my date and time input fields on the form.
let datePattern = /\w+\s\d+\s\d+/; //regex mumbo jumbo, w3schools , if you want to learn more
let dateResult = $w(‘#datePicker1’).value.toDateString().match(datePattern);
let timePattern = /\d+:\d+/;
let timeResult = $w(‘#timePicker1’).value.match(timePattern);
var dateTime = dateResult[0] + " , " + timeResult[0];
// dateTime will be formatted this way: Mmm DD YYYY , HH:MM (24HR time)
Hopefully this helps
1 Like