auto format a text imput as time format

[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?

[WarrenBelz · Accepted solution]

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.

[v-xida-msft]

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,

[WarrenBelz]

Thank You @v-xida-msft for the alternative.

@felipito1 you might try mine as well if you want something less complex

[WarrenBelz]

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.

[felipito1]

Hi @WarrenBelz  

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

Thank you! 

[SteefQ]

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

[WarrenBelz]

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.

[SteefQ]

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.

[WarrenBelz]

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