Adding formatting to date input field

[rsparks]

A lot of online forms these days automatically add in spacing or symbols (e.g. / or - ) to clearly format a date when typed in. 

For example typing in "09111990" would be formatted to "09 / 11 / 1990" as the user is typing.

Is this feasible in powerapps?  

[v-bofeng-msft]

Hi @rsparks :

Could you tell me:

• Do you want to automatically format the date entered by the user?

My method is to achieve this function through variables.I've made a test for you reference:

1\Add a text input control(TextInput1)

OnChange

If(
IsMatch(TextInput1.Text,"\d{2}\/\d{2}\/\d{4}"),/*First detect whether the user's input meets the expected format*/
Set(TheVar,TextInput1.Text),
IsMatch(TextInput1.Text,"\d{8}"),/*Check whether the user's input is 8 pure numbers*/
Set(TheVar,Concatenate(Left(TextInput1.Text,2),"/",Mid(TextInput1.Text,3,2),"/",Right(TextInput1.Text,4))),
Notify("Unrecognized date format") /*If the user's input cannot be recognized, an error will be reported*/
);
Reset(TextInput1)

Default

TheVar

Best Regards,

Bof

[rsparks]

@v-bofeng-msft that looks good, but isn't what I'm after unfortunately. 

I want it to format the date as they're typing. If the user sees that the date isn't automatically formatting, I think they'll just add the " / " themselves. Is there any way for the " / " to appear while the user is still typing, without having to click away from the input?

[v-bofeng-msft · Accepted solution]

Hi @rsparks :

It’s a bit difficult to format the user’s input in real time, I suggest you insert another timer control.For example:

1\Add a text input control

Default

TheVar

2\Add a timer control

AutoStart

true

Duration

50 /*loop in 0.05s*/

 OnTimerEnd

If(
IsMatch(TextInput1.Text,"\d{2}"),
Set(TheVar,TextInput1.Text&"/");Reset(TextInput1),
IsMatch(TextInput1.Text,"\d{2}\/\d{2}"),
Set(TheVar,TextInput1.Text&"/");Reset(TextInput1))

Repeat

true

Visible

false /*make it unvisible*/

I used a timer to detect the value entered by the user every 0.05s and format the value in real time.

Best Regards,

Bof

[rsparks]

@v-bofeng-msft that works great.

I assume that there is no way to configure it to also allow the user to enter 1 digit dates? E.g. if they type 1/5/90 it wouldn't expand into 01/05/90.  

[v-bofeng-msft]

Hi @rsparks :

This is easy to solve, just add some judgment conditions.For example:

Set the timer control's  OnTimerEnd to:

If(
IsMatch(TextInput1.Text,"\d{2}"),
Set(TheVar,TextInput1.Text&"/");Reset(TextInput1),
IsMatch(TextInput1.Text,"\d\/"),
Set(TheVar,"0"&TextInput1.Text);Reset(TextInput1),
IsMatch(TextInput1.Text,"\d{2}\/\d\/"),
Set(TheVar,Left(TextInput1.Text,3)&"0"&Right(TextInput1.Text,2));Reset(TextInput1),
IsMatch(TextInput1.Text,"\d{2}\/\d{2}"),
Set(TheVar,TextInput1.Text&"/");Reset(TextInput1))

 Best Regards,

 Bof