cancel
Showing results for 
Search instead for 
Did you mean: 
WarrenBelz

Throw away the hour and minute drop-downs and enter the time directly

Have you ever wanted to throw away the drop-downs that Power Apps supplies for time fields and simply have the user enter a valid time. For this you would also want to display the time currently stored in the data source and do both in an hh:mm format.

TimeTextBox.jpg

It is not as difficult or complex as you may think and can also all be done within a SubmitForm() action using the Update property of the data card. Here are the steps required.

Unlock the card and delete the two drop-downs for hour and minute and the separator and add a Text Control (I will call it TxtTime1 here and will use DateValue1 as the Date Picker name). Set the DelayOutput of this Text Control to true.

You will get some errors - change the Y of the ErrorMessage control to

Parent.Height-Self.Height

The Update of the Data Card

With(
   {
      wHour: 
      Value(
         Left(
            TxtTime1.Text,
            2
         )
      ),
      wMinute: 
      Value(
         Right(
            TxtTime1.Text,
            2
         )
      )
   },
   DateValue1.SelectedDate + 
   Time(
      wHour,
      wMinute,
      0
   )
)

The OnSelect of the Text Control - also put this on OnVisible of the screen and at the END of any Save code after SubmitForm()

UpdateContext({varTime1: Blank()})

The Default of the Text Control

If(
   !IsBlank(varTime1),
   varTime1,
   Text(
      Hour(Parent.Default),
      "00"
   ) & ":" & 
   Text(
      Minute(Parent.Default),
      "00"
   )
)

The OnChange of the Text Control

With(
   {
      wHour: 
      RoundDown(
         Value(Self.Text) / 100,
         0
      ),
      wMinute: 
      Value(
         Right(
            Self.Text,
            2
         )
      )
   },
   If(
      wHour > 23 || wMinute > 59,
      Notify(
         "Invalid Time",
         Error,
         4000
      ),
      UpdateContext(
         {
            varTime1: 
            Text(
               wHour,
               "00"
            ) & ":" & 
            Text(
               wMinute,
               "00"
            )
         }
      )
   )
);
Reset(Self)

and now it should all work both displaying the current time and formatting any valid input as hh:mm

 

Comments