[Issue] How to display a Time Value?

Hello,

I tried to display on a text field a Time Value, but the field stay gray!
It works fine on Date&Time field with format choice.
https://support.wix.com/en/article/formatting-the-date-and-time-field-in-your-database-collection

But How to display a simple Time field on a text Value?

As you are adding it through a dataset, simply make sure that the permissions for the dataset are setup correctly for read only and you will need to make sure that the elements disabled design is changed from the greyed out colour and is made to be the same design as your enabled inputs.

You can do it easily in code like this with getting today’s date and time.
https://support.wix.com/en/article/corvid-tutorial-displaying-todays-date-with-code

// Gets today's date and time
const today = new Date();
// Sets the property of the text element to be a string representing today's date in the user's local format
$w("#text1").text = today.toLocaleDateString();
$w("#text12").text = today.toLocaleTimeString();

Have a read here for more on the read only and greyed out reason.
https://support.wix.com/en/article/corvid-formatting-dates

Hello GOS
Thanks for your reply!

But I’m not trying to display a DateTime Type but just a Time Type (TimeSpan)

Have I do display it by code by casting my Time to DateTime?

Did you actually read the pages that where linked as it all works fine for me…

Hey @givemeawhisky , that didn’t work. Just to confirm, we are talking about the same thing, right? because it’s not a Date Field.

So to resume I got a Time field called startingTime .

console.log( startingTime ) => 15:00:00.000
console.log( startingTime.toLocaleTimeString() ) => (no error/ no result)

$item( “startTimeLabel” ).text = itemData.startingTime
=> 15:00:00.000 (because time is not a Date is a String)
$item( “startTimeLabel” ).text = itemData.startingTime.toLocaleTimeString()
=> (nothing happen)

That is because the field value is ‘Time’ whereas your element value is ‘Text’.

You can change the time field in your dataset from time to text and that will allow you to use that field through the connect to dataset option that you are using.

However, that will then give you the full time shown, so you will have to use ‘To Locale Time String’ in your page code to show the time as just hours and mins only.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

The easiest way for you to do this is to simply connect both text boxes to the date and time field which is a text field and set one text box for the date and use the date formatting and use the other one for the time setting.

Or in your case just set the time only.

I managed it by Code
Because from code behind Time is not a Date but a String (ex : ’ 12:30:00.000’ )

Time = 12:30 (from DataBase field Time)
function FormatTime (time) {
let format = time.split( “:” ).slice( 0 , 2 );
return format.join( “h” );
}
=> 12h30

You can also cast Time variable to DateTime like so
function CastTimeToDateTime (time) {
l et format = time.split( “:” ).slice( 0 , 2 );
let date = new Date();
date.setHours(format[ 0 ],format[ 1 ], 0 );
return date;
}
And then use date. toLocaleDateString ();

I think i just did a programmer move :wink:

Yes so like this for date and time.

1 Like

@givemeawhisky Actually Time Value is a string “Text”, not a date “DateTime”
The idea was to find a solution without any change on the data base
(it would be to much work).

@givemeawhisky Yes but the question was very specific to Time not DateTime.
Cause DateTime (Type Date) and Time (Type String) are different.
So your answer was kind of misunderstanding at first.
Thanks you! You can close this topic, now

@givemeawhisky

Hi there! May I ask what if I want to have a query to my database and use .eq(“_owner”, userId) to look for owner’s data then take the owner’s time value then afterwards, make it a text value in a page?

NOTE: There are more than 1 value of time in a row.
Example:
Sunday = 10:00 AM
Monday = 03:00 PM
Tuesday = 7:00PM

And also how can I convert that 03:00 PM (12 hr format) to 15:00 (24 hr format)?

I’m using a time picker to get the value and made it 24 hr format. But after the value from the time picker stored in the database it became 12 hr format. I don’t know why. :disappointed_relieved:

@aeroengineerz7 Hi!
same problem…