auto format a text imput as time format

(0) Share

Report

Posted on by felipito1

Hi guys:

Good day, I am looking to auto format a text imput label where when the user write an hour it change auto:

User write --> 1910
Auto format --> 19:10

as you can see I want to avoid to the user write the colon.

Is any way to do that?

Categories:

Building Power Apps

I have the same question (0)

All responses (13)

Answers (2)

Verified answer

WarrenBelz 153,084 Most Valuable Professional on at

Like (2)

Report
Hi @felipito1 ,
This will work after the user presses Enter after 4 characters.
Put this on the OnChange of the Text control (call the Variable whatever you like)
If( Len(YourTextBoxName.Text) > 3, UpdateContext( { vColon: Left( TextInput1.Text, 2 ) & ":" & Right( TextInput1.Text, 2 ) } ); Reset(YourTextBoxName) )
Make the Default of the Text box
vColon

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Was this reply helpful? Yes No
v-xida-msft on at

Like (1)

Report
Hi @felipito1 ,

Do you want the Text Input value to be formatted as time automatically after you enter 4 number value?

Based on the needs that you mentioned, I think the Timer control could achieve your needs. Please consider add a Timer control in your app screen. Set the Duration property to following:

1000

set the AutoStart and Repeat property to following:

true

set the OnTimerEnd property to following:

If( Len(TextInput1.Text) = 4, // TextIput1 represents the Text Input box where enter your time value Set( FormattedResult, Left(TextInput1.Text, 2) & ":" & Right(TextInput1.Text, 2) ) )

Set the Visible property of the Timer control to false.

Set the Default property of the TextInput1 to following:

FormattedResult

Please check the following GIF screenshot for more details:

Note: The OnChange property of the Text Input could be fired only when the focus is move away from that Text Input box

Best regards,

Was this reply helpful? Yes No
WarrenBelz 153,084 Most Valuable Professional on at

Like (1)

Report

Thank You @v-xida-msft for the alternative.
@felipito1 you might try mine as well if you want something less complex

Was this reply helpful? Yes No
WarrenBelz 153,084 Most Valuable Professional on at

Like (0)

Report

Hi @felipito1 ,
Just checking if you got the result you were looking for on this thread. Happy to help further if not.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Was this reply helpful? Yes No
felipito1 97 on at

Like (0)

Report

Hi @WarrenBelz

Sorry my late reply, I have use that code on the "On change" property and it works really great!

Thank you!

Was this reply helpful? Yes No
SteefQ 42 on at

Like (0)

Report
Hi WarrenBelz!

I tried your solution but didn't get it to work.
My question is, what should the column in sharepoint be? should i be a number or plain text? also should i use a maxLength to the text box?

This is my code:
If( Len(till_value.Text) > 3, UpdateContext( { vColon: Left( till_value.Text, 2 ) & ":" & Right( till_value.Text, 2 ) } ); Reset(till_value) )
My problem seems to be that it dosn't trigger to the onChange event even if i press enter.
I also added vColon on Default

Was this reply helpful? Yes No
WarrenBelz 153,084 Most Valuable Professional on at

Like (0)

Report

Hi @SteefQ ,

This is a very old closed post, but it should work on a Text Control - I do not know of any reason the OnChange would not trigger it.

Was this reply helpful? Yes No
SteefQ 42 on at

Like (0)

Report

Hi again,
thanks for replying, sorry for posting on a old post i noticed it but thought it would be better than posting a new one.

It was my fault i got it to work when i changed the property to numbers, is there anyway to make it on property text?

The reason why im asking this is because the user can input letters inside the box.

Was this reply helpful? Yes No
WarrenBelz 153,084 Most Valuable Professional on at

Like (0)

Report
Hi @SteefQ ,

A colon is Text, so you need text, however try this OnChange

UpdateContext( { varTime: If( IsMatch( Self.Text, Digit & Digit & Digit & Digit ), Left( Self.Text, 2 ) & ":" & Right( Self.Text, 2 ), Blank() ) } ); Reset(Self)

Default is

varTime

Also set DelayOutput to true

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Visit my blog Practical Power Apps

Was this reply helpful? Yes No
SteefQ 42 on at

Like (0)

Report
Hi!
Sorry for a late reply,

It's working fine, but i got one question.
The users will input the times they want to work eg: 08:00 to 17:00
Could i do that the user could only input between 00:00 to 00:00
and the minutes should only be between 00 to 60

EG: if the user input 25:69 it should not accept or 14:68 it should not accept

EDIT:

If(Right(TextInput1.Text,2)>60, UpdateContext( { varTime: If( IsMatch( Self.Text, Digit & Digit & Digit & Digit ), Left( Self.Text, 2 ) & ":" & Right( Self.Text, 2 ), Blank() ) } ); Reset(Self), Reset(Self));

This is my code now and it throws out an error: Invalid arguments type. Expecting one of the following: Number, Date, Time, DateTime.

It works without the right value..

Was this reply helpful? Yes No