Display Time field value on page

Ask the community
,
1

Hey everyone, so I’ve spent about a day or 2 trying to accomplish something that seemed fairly straight forward. I wanted to display a value in my database that was formatted to TIME and not the DATE & TIME, seeing how I need to display items only based on TIME and not specific to a date, since they would be re-occurring, like a schedule. Not only was I able to write code to grab one TIME entry, I was able to write the code to add it to a repeater element. So if you were trying to use a repeater to display out set times or schedule times, etc.

$w("#repeater2").onItemReady( ($item, itemData, index) => {
       // Grabs the time field value in your database and adds it to your timepicker. Make sure you ID in properties match
       $item("#timePicker3").text = itemData.time;
       // Grabs the time field value in your database and adds it to your textbox. Make sure you ID in properties match
       $item("#text36").text = itemData.time;
} );

Just make sure you have your repeater, repeater elements and timePicker/Textbox connected to your dataset that is pulling from the database.

I’ve also managed to just pull in one TIME value, but it’ll bring in the most recent time entered value.

$w('#text36').text = $w('#dataset4').getCurrentItem().time;

And last thing to mention, the textbox will display the time as hh:mm:ss:milliseconds. Haven’t attacked that part yet. But hopefully this will help someone that was trying to display time without using the Date & Time field, because they only need to work with time.

FYI, all the photos aren’t showing up because I was too lazy to add the photos to the other entries in the database.

1020×785 34.9 KB

515×740 60.6 KB

2

Follow up, I was able to figure out how to strip down the textfield to just the HH:MM.

$w("#repeater2").onItemReady( ($item, itemData, index) => {
      // Grabs the time field value in your database and adds it to your timepicker. Make sure you ID in properties match
     $item("#timePicker3").text = itemData.time;
 // Grabs the time field value in your database and adds it to your textbox. Make sure you ID in properties match
     const originalTime = itemData.time;
     const newTime = originalTime.split(":").slice(0,2);
     $item("#text36").text = newTime.join(":");        
} );

Now just trying to figure out how to change from 24H to 12H format.

3

You can do that easily, just use a long winded way here to convert 24 into 12.
https://medium.com/front-end-weekly/how-to-convert-24-hours-format-to-12-hours-in-javascript-ca19dfd7419d
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours
https://www.w3schools.com/jsref/jsref_gethours.asp

Or just look at using something like toLocaleString with options to get what you want.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
https://www.w3schools.com/jsref/jsref_tolocalestring.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
https://www.w3schools.com/jsref/jsref_tolocaletimestring.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toTimeString
https://www.w3schools.com/jsref/jsref_totimestring.asp

Or just look at using a nodeJS like Moment through Wix Package Manager to do it for you.
https://momentjs.com/docs/#/displaying/
https://support.wix.com/en/article/corvid-managing-external-code-libraries-npm-with-the-package-manager