cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
rsparks
Helper V
Helper V

Adding formatting to date input field

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?  

1 ACCEPTED SOLUTION

Accepted Solutions

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

View solution in original post

5 REPLIES 5
v-bofeng-msft
Community Support
Community Support

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

 

90.gif

Best Regards,

Bof

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

 

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

View solution in original post

@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.  

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

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Apps Community Call

Monthly Power Apps Community Call

Did you miss the call?? Check out the Power Apps Community Call here!

secondImage

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV STudio

Power Platform ISV Studio

ISV Studio is the go-to Power Platform destination for ISV’s to monitor & manage applications post-AppSource publish.

Top Solution Authors
Top Kudoed Authors
Users online (47,180)